render props 是指一种在React组件之间使用一个值作为函数的prop共享代码的简单技术
import React, { Component } from "react";
export default class RenderP extends Component {
myRender = ({ name }) => {
return <div>my name is {name}</div>;
};
myRender2 = ({ name }) => {
return <div>my name is {name}</div>;
};
render() {
return (
<div>
<DataProvider render={this.myRender} />
<DataProvider render={this.myRender2} />
</div>
);
}
}
class DataProvider extends Component {
state = {
name: "Tom",
};
render() {
return (
<div>
<button onClick={() => this.setState({ name: "luyi" })}>luyi</button>
<p>共享数据组件自己内部的渲染逻辑</p>
{this.props.render(this.state)}
</div>
);
}
}