Javascript 与react中的父组件交互

我一直在考虑我想在我的代码库中创建的某种抽象，这将消除很多样板文件。我的问题是关于实现子类和父类之间交互的最“正确”的方法

我们有很多

我想把它们抽象成一种

组件。这样做的原因是，我们有很多关于可排序标题、分页等的样板文件。。每次我们实现一个新表时，都要进行大量的复制粘贴和额外的测试，这些都应该被抽象掉

我的理想模式是：

<Table>
    <Table.Header>
        <Table.SortableHeader dataKey="id" default>ID</Table.SortableHeader>
        <Table.SortableHeader dataKey="name">Name</Table.SortableHeader>
        // ...
    </Table.Header>
    <Table.PaginatedBody pageSize=15 rowElement={ MyRowElement } />
</Table>

身份证件
名称
// ...

为此，

组件需要能够设置与父

组件的状态（或以其他方式交互），以更改其排序键/顺序，并且排序键/顺序需要传递给

组件

此外，

组件需要知道当前的排序键/顺序，因为它们将根据排序键是否与其

数据键相同以及排序顺序是否为
asc
或
desc
而显示不同

我想到的一种方法是在
上下文中向下传递父组件（我知道新的基于上下文的东西已经出现了，但这是一个更一般的原则问题）

这种方法会带来任何明显的问题吗？有没有其他标准的方法来做这种事情？我希望避免将配置对象传递给
组件，然后该组件将生成结构，因为我觉得JSX是创建视图元素的一个非常好的DSL，而且这更干净
 您可以在
表
组件中定义排序处理程序，并将其与排序状态一起添加到子道具中。通过这种方式，
标题
组件可以调用父排序处理程序来更新
表
状态，然后将排序状态传递给
标题
道具

您可以使用
cloneElement
向
子级添加道具
：

{ React.Children.map(this.props.children, (child) => {
  return React.cloneElement(child, {
    sort: this.state.sort,
    handleSort: this.handleSort
  });
})}

完整示例代码：
我可能建议您看看react虚拟化实现中的一种方法：使用元素克隆，我没有想到。您是否可以将示例添加为代码片段而不是链接，我会将其标记为正确答案（我使用了此方法）