如何优雅的调整 React 组件内的子组件位置？

Question

基於 react-semantic-ui ，我组合出了一个可以 搜寻和换页的的 Table 组件。
叫做 <PaginatedTable />

working example: https://codesandbox.io/s/23q6...

使用方式如下

<PaginationTable
    items={[
      {
        id: 1,
        name: "test-item-1 ???"
      },
      {
        id: 2,
        name: "test-item-2"
      },
      {
        id: 3,
        name: "test-item-3"
      }
    ]}
    columnOption={[
      {
        header: "idHeader",
        cellValue: "id",
        onItemClick: item => {
          alert(item.id);
        },
        sortingField: "id"
      },
      {
        header: "Name~",
        cellValue: item =>
          `*custom text cannot be searched* property can item.name => ${
            item.name
          } `,
        onItemClick: item => {
          alert(item.name);
        },
        sortingField: "name"
      }
    ]}
    initSortingField={"id"}
    initSortingOrderAsc={false}
    pagination
    itemsPerPage={2}
    searchKeyProperties={["id", "name"]}
  />

但这组件目前只能有固定的顺序如下：

<PaginationTable>
 <SearchBar />
 <Table />
 <PaginationBar />
</PaginationTable>

而我在组件内其实并没有拆分 SearchBar, Table, PaginationBar 这样三个子组件。
所以我无法利用 render props 的技巧去调整子组件的位置。
若修改成 render props 後，就可这样使用调整子组件的位置：

<PaginationTable {...其他 props}>
{({ SearchBar, Table, PaginationBar  })=>
<div>
 <SearchBar />
 <Table />
 <SearchBar />
</PaginationTable>
</div>
</PaginationTable>

当我尝试去改成 render props ，遇到很多麻烦，因为当拆成三个子组件时，我必须把原本用到 <PaginationTable> 中 this 的相关变数 ( this.state, this.props, this.xxxFunction ) 都修改，例如原本
在 <PaginationTable> 中 用到 this.setState({ searchBarText: e.target.value }) 就必须改成修改很多写法才能传递下去

<SearchBar onTextChange={()=>{

    this.setState({
        searchBarText: e.target.value
    });
}} />

请问有什麽方式可以做到，优雅的调整子组件的顺序，又不用特别为这件事情改成 render Props 的写法呢？
又或者要怎麽更优雅的改成 render props 呢？

Answer 1

我找到轻松改成 render props 的方式了。
一开始我是这样改，会造成DOM每次都被更新，

render(){
const SearchBar = ()= (<Input onChange={()=>{...} />);
const TableElement = ()=>(<Table {...} > ... </Table>);
const PaginationBar = ()=>(<Menu {...} > ... </Menu>);
enter code here
return(
<React.Fragment>
    {this.props.children({ SearchBar,TableElement, PaginationBar })} 
</React.Fragment>)};

只要改成这样就可以了

render(){
    const SearchBar = (<input onChange={...} />);
    const TableElement = (<Table .../>);
    const PaginationBar = (<Menu .../>);
    //... same as above
}