React: render props 使用指南
2021-01-29 React
什么是Render props #
是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。
具有render props的组件接受一个函数,该函数返回一个React元素并调用它,而不是直接实现自己的渲染逻辑。
render props 是一个用于告知组件需要渲染什么内容的组件。
是一种逻辑复用的的一种方式
实现方式 #
原生实现的方式 #
class MouseTracker extends React.Component{
state = {x:0, y: 0}
handleMouseMove = event => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render(){
return (
<div>
<p>鼠标移动</p>
<p>鼠标X位置: {this.state.x}</p>
<p>鼠标Y位置: {this.state.y}</p>
</div>
)
}
}
// 直接通过setState修改之后进行的一种实现
class MouseTracker extends React.Component{
state = {x:0, y: 0}
handleMouseMove = event => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render(){
return (
<div>
<p>鼠标移动</p>
<p>鼠标X位置: {this.state.x}</p>
<p>鼠标Y位置: {this.state.y}</p>
</div>
)
}
}
// 直接通过setState修改之后进行的一种实现
通过children的方式 #
class MouseTrackerChild extends React.Component{
state = {x:0,y:0}
handleMouseMove=(event)=>{
this.setState({
x: event.clientX,
y: event.clientY
})
}
render(){
return (
<div>
{this.props.child(this.state)}
</div>
)
}
}
// usage:
const Component = <MouseTracker>
{
props=>(
<div>
<p>鼠标X位置: {props.x}</p>
<p>鼠标Y位置: {props.y}</p>
</div>
)
}
</MouseTracker>
class MouseTrackerChild extends React.Component{
state = {x:0,y:0}
handleMouseMove=(event)=>{
this.setState({
x: event.clientX,
y: event.clientY
})
}
render(){
return (
<div>
{this.props.child(this.state)}
</div>
)
}
}
// usage:
const Component = <MouseTracker>
{
props=>(
<div>
<p>鼠标X位置: {props.x}</p>
<p>鼠标Y位置: {props.y}</p>
</div>
)
}
</MouseTracker>
通过render属性 #
class MouseTrackerRender extends React.Component{
state = {x:0, y: 0}
handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render(){
return <div>
{this.props.render(this.state)}
</div>
}
}
// usage:
<MouseTrackerRender render={
params=>(<div>
<p>鼠标X位置: {params.x}</p>
<p>鼠标Y位置: {params.y}</p>
</div>)
} />
class MouseTrackerRender extends React.Component{
state = {x:0, y: 0}
handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render(){
return <div>
{this.props.render(this.state)}
</div>
}
}
// usage:
<MouseTrackerRender render={
params=>(<div>
<p>鼠标X位置: {params.x}</p>
<p>鼠标Y位置: {params.y}</p>
</div>)
} />
关于 render prop 可以与HOC相互转换。
react ts #
版权属于: vincent
转载时须注明出处及本声明
Tags:# App开发