react/docs/render-props.html

React 的 Render Props 是一种在组件间共享代码的技巧，它允许你将渲染逻辑从组件中分离出来，并传递给其他组件。

使用 Render Props

Render Props 允许你将渲染逻辑从组件中分离出来，并将其传递给其他组件。这种方式使得组件之间的逻辑复用更加灵活。

定义 Render Props 组件 首先，定义一个 Render Props 组件，它接收一个函数作为 prop，该函数负责渲染内容。
```
function RenderPropsComponent({ render }) {
  return <div>{render()}</div>;
}
```
使用 Render Props 在父组件中，将 Render Props 组件作为子组件使用，并传递一个函数作为 prop。
```
function ParentComponent() {
  return (
    <RenderPropsComponent render={() => <h1>Hello, World!</h1>} />
  );
}
```

优点

提高组件复用性
使组件更加解耦
易于测试

示例

假设我们有一个组件需要根据用户状态显示不同的内容，我们可以使用 Render Props 来实现。

function UserStatusComponent({ renderOnline, renderOffline }) {
  const isOnline = true; // 假设用户在线

  return isOnline ? renderOnline() : renderOffline();
}

function ParentComponent() {
  return (
    <UserStatusComponent
      renderOnline={() => <h1>用户在线</h1>}
      renderOffline={() => <h1>用户离线</h1>}
    />
  );
}

扩展阅读

想要了解更多关于 React 的 Render Props，可以阅读官方文档：React Render Props