其他分享
首页 > 其他分享> > render()笔记

render()笔记

作者:互联网

React中render()的目的是什么?

每个React组件都必须有一个render(),它返回一个React元素,它是原生DOM组件的表示方式。

如果需要渲染多个HTML元素,则必须将它们组合在一个封闭标签中,例如<form>、<group>、<div>等。次函数必须保持纯洁,即每次调用时必须返回相同的结果。
在使用Mouse组件的时候,通过一个render属性,传递一个可用组件Cat给父组件Mouse,而在Mouse组件中,可以将本身的state对象传递给Cat组件,Cat组件中mouse属性的值与Mouse父组件中的state相同。

简单来说:就是父组件可以将自己的state传递给子组件,而子组件可以根据父组件的state对象来进行render。

这样做的好处是:

<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>
    )
}

标签:render,笔记,Cat,React,state,组件,Mouse
来源: https://www.cnblogs.com/wxhDaydream/p/16441771.html