将React组件复用的两个利器：render-props与高阶组件

前端

2023-10-26 21:59:50

render-props与高阶组件(一)

对于普通的React组件而言，我们通常会通过使用props去传递组件的数据。但是有一些场景下，我们会发现很难用普通的props去传递数据，例如：

复用组件的方法逻辑
使用父组件的数据动态创建子组件

此时，render-props是一种很好的解决方案。其核心思想就是：父组件将自己的数据和方法通过props的形式传递给子组件，子组件通过调用这些方法来渲染自己的内容，父组件通过定义子组件的props来控制子组件的渲染行为。

render-props的应用场景

复用组件的方法逻辑

例如，我们有一个组件需要用到一个方法来处理表单的数据，这个方法在多个组件中都需要用到。我们可以将这个方法作为props传递给这些组件，让它们调用这个方法来处理表单的数据。

使用父组件的数据动态创建子组件

例如，我们有一个组件需要根据父组件的数据来动态创建子组件。我们可以将父组件的数据作为props传递给子组件，让子组件根据这些数据来创建自己的子组件。

render-props的实现方式

render-props的实现方式非常简单，只需要在父组件中定义一个props，然后在子组件中调用这个props即可。

例如，我们可以在父组件中定义一个名为render的props，然后在子组件中调用这个props来渲染自己的内容：

// 父组件
class ParentComponent extends React.Component {
  render() {
    return (
      <ChildComponent
        render={(data) => {
          return (
            <div>
              {data}
            </div>
          );
        }}
      />
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  render() {
    return this.props.render(this.props.data);
  }
}