render props 模式

作用

对组件的状态与逻辑进行复用

**本质: 子组件 render(函数组件 return 里)钩子中 调用 父组件传递来的 props.renderFn，并传递子组件自状态****。**

如何向组件内部动态传入带内容的结构(标签)?

Vue 中:

使用 slot 技术, 也就是通过组件标签体传入结构

React 中:

1. <font style="color:#333333;">使用children props: 通过组件标签体传入结构</font>
2. **使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性。render可以自定义名，推荐使用 childen**

children props

–父组件：

<a>
  <b>xxxx</b>
</a>

–子组件 需要配置 预留插槽

{
  this.props.children;
}

问题: 如果 B 组件需要 A 组件内的数据, ==> 做不到

render props

可以传递参数，类似 vue 作用域插槽

---

例子一

父组件调用  A 组件，并通过 render props 传递回调  

<A render={(data) => <C data={data}></C>}></A>

A 组件内部:<font style="color:#333333;">{this.props.render(内部state数据)}</font>

C 组件内部: 读取 A 组件传入的数据显示 <font style="color:#333333;">{this.props.data}</font>

解释：

• A 组件内部的 state 以及通过回调的方式暴露出来了，
• C 组件顺理成章的拿到了 A 组件内部数据。

例子二

父组件调用子组件 B。

B 组件内部:

总结

可以这么理解：B 组件内部预留了一个插槽，就像是 props.children。但又想把自身的状态传递出去，方便逻辑的复用。所有我们可以这样做：在外层父组件中，向 B 组件传递名为render的props, 其值是一个函数(函数式组件)，该函数的参数 我们期望是 B 组件里面的状态，以遍我们利用该状态去渲染新的组件。所有我们只需要在 B 组件中调用 props.render(B组件自身的状态)，就可以把 B 组件内部的状态传递到外层组件啦~