Render props是React组件之间使用一个值为函数的prop共享代码的简单技术
在具有render prop的组件接受一个返回React元素的函数,在组件内部写渲染逻辑
class DataProvider extends React.Components {
state = {
name: 'Tom'
}
render() {
return (
<div>
<p>共享数据组件自己内部的渲染逻辑</p>
{ this.props.render(this.state) }
</div>
);
}
}
// 调用方式
<DataProvider render={data => (
<h1>Hello {data.name}</h1>
)}/>
DataProvider中的props中有一个render函数,这里调用这个函数,返回一个<h1>Hello Tom</h1>的标签
缺点:嵌套地狱问题
function ComponentA(props) {
return (
<div>
{/* ...一些其他的组件逻辑... */}
{props.render()}
</div>
);
}
function ComponentB(props) {
return (
<div>
{/* ...一些其他的组件逻辑... */}
{props.render()}
</div>
);
}
function ComponentC(props) {
return (
<div>
{/* ...一些其他的组件逻辑... */}
{props.render()}
</div>
);
}
function App() {
return (
<ComponentA
render={() => (
<ComponentB
render={() => (
<ComponentC
render={() => (
<div>嵌套地狱!</div>
)}
/>
)}
/>
)}
/>
);
}
ReactDOM.render(<App />, document.getElementById('root'));