感受renderProps之美：组件间协作的艺术

2024-01-16 23:32:07

renderProps简介

renderProps是一种React组件间数据共享和代码复用模式。它允许父组件通过传递一个渲染函数给子组件，来控制子组件的渲染逻辑。子组件通过该函数来访问父组件的数据，并根据这些数据渲染出需要的元素。

renderProps的使用方式

renderProps的使用方式非常简单。首先，父组件需要定义一个包含渲染函数的prop。然后，子组件通过接受该prop，并在其render方法中调用该函数，来渲染元素。

父组件

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' }
      ]
    };
  }

  render() {
    const { data } = this.state;

    return (
      <ChildComponent
        render={rowData => (
          <div key={rowData.id}>
            {rowData.name}
          </div>
        )}
      />
    );
  }
}

子组件

class ChildComponent extends React.Component {
  render() {
    const { render } = this.props;

    return (
      <div>
        {data.map(rowData => render(rowData))}
      </div>
    );
  }
}

在上面的例子中，父组件ParentComponent定义了一个名为data的状态，其中包含了两条数据。然后，它将这个数据通过renderprop传递给子组件ChildComponent。子组件ChildComponent通过接受renderprop，并在其render方法中调用该函数，来渲染出每一条数据。