标签：render 笔记 Cat React state 组件 Mouse

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。