Question

以下是React offical document中有关渲染道具的用法：

<DataProvider render={data => <h1>Hello {data.target}</h1>} />

以下是其实现：

render() {
  return <div>{this.props.render(this.state)}</div> ;
}

当我练习此功能时，我突然意识到该技术并不是那么花哨，因为我们已经可以将功能组件作为实现相同功能的道具，例如：

render() {
  const { render: Render } = this.props
  return <div>{<Render {...this.state}>}</div> ;
}

更具可读性的一个：

render() {
  const { RenderComponent } = this.props
  return <div>{<RenderComponent {...this.state}>}</div> ;
}

在我看来，<RenderComponent {...this.state}>看起来比this.props.render(this.state)更友好，因为前者使用的是JSX语法，每个初级React开发人员都已经知道它的工作方式，而后者却令人困惑（已经存在组件中的另一个render()成员方法）。

我想在我的项目中使用功能组件版本，但是我担心后面是否会有任何问题。

问题

哪个实践比另一个更好？（包括优点和缺点）

Answer 1

这里的事情是，在传递项目渲染器的情况下，您的组件需要处理渲染。借助渲染道具，您可以使任何组件处理子渲染并添加任何种类的渲染逻辑，而无需对组件进行任何更改。从架构的角度来看，这更符合SOLID原则。

渲染道具与传递的功能组件，哪个是合适的？

问题

1 个答案: