Question

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

用法

<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 SearchBar，Table，PaginationBar

中编写3个子组件

所以我很难重写它以使道具改变下面的顺序

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

因为当我尝试更改渲染道具时，我首先必须独立编写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等），然后在render函数中引用这些变量。

我在这里https://codesandbox.io/s/vy4799zp45

修改了您的示例

如何安排React子组件顺序？

1 个答案: