React中render()的目的是什么?
每个React组件都必须有一个render(),它返回一个React元素,它是原生DOM组件的表示方式。
如果需要渲染多个HTML元素,则必须将它们组合在一个封闭标签中,例如<form>、<group>、<div>
等。次函数必须保持纯洁,即每次调用时必须返回相同的结果。
在使用Mouse组件的时候,通过一个render属性,传递一个可用组件Cat给父组件Mouse,而在Mouse组件中,可以将本身的state对象传递给Cat组件,Cat组件中mouse属性的值与Mouse父组件中的state相同。
简单来说:就是父组件可以将自己的state传递给子组件,而子组件可以根据父组件的state对象来进行render。
这样做的好处是:
- 不用担心props的命名问题
- 可以溯源,子组件的props一定是来自于直接父组件
- 是动态构建的
<Mouse render={mouse => (
<Cat mouse={mouse}/>
)}/>
render() {
return (
<div>
<ToggleRenderProps render={({on,toggle}) => (
<div>
{
on && <h1>Hey www</h1>
}
<button onClick={toggle}>隐藏 显示</button>
</div>
)}/>
</div>
)
}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)