如何安排 React 子组件顺序？

Question

使用react-semantic-ui，我制作了一个可搜索、可分页的 Table React 组件

工作示例：https://codesandbox.io/s/23q6vlywy

用法

<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"]}
  />

但是这个组件目前只能有一定的顺序

 1.SearchBar on top
 2.Table on middle
 3.PaginationBar on bottom

实际上，我并没有在Component中写3个子组件，SearchBar，Table，PaginationBar

所以我很难重写它来渲染道具的方式来改变如下的顺序

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

因为我在尝试更改render props时，首先要独立编写3个组件，这意味着我必须将this（this.state，this.props，this.xxxFunction）下的所有变量都更改为别的东西.

例如：

在，我可以用

 <Input onChange={()=>{
     this.setState({ searchBarText: e.target.value });
 }}/>

但是如果我把它改成 3 个组件，我必须把它重写成类似的东西

const SearchBar = ({onTextChange}) => <Input onChange= 
    {onTextChange}/>

<SearchBar onTextChange={()=>{
    this.setState({
        searchBarText: e.target.value
    });
}} />

有什么方法可以优雅地调整子组件的顺序，或者有什么方法可以更轻松地编写渲染道具？

更新@2018.10.27 17:36 +08:00

我修改了<PaginationTable>的渲染函数如下，但是在<SearchInput>上打字时会失去鼠标光标焦点

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>)};

然后我发现，这样一来，每次我的状态更新时，DOM都会更新，因为每次渲染都会通过const SearchBar = ()=>(...)进行新的组件引用。

感谢@Ralph Najm

如果我如下声明子组件，DOM 不会每次都更新。

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

通过这种方式，我可以将我的组件更改为渲染道具，以便非常轻松地安排顺序。

提前致谢。

Answer 1

在 PaginationTable 组件中更改您的 render 函数并在 return 语句之前，将元素分配给变量（SearchBar、Table、PaginationBar 等），然后在渲染函数中引用这些变量。

我在这里修改了你的例子https://codesandbox.io/s/vy4799zp45