Javascript 如何安排子组件顺序？

使用

react语义ui

，我制作了一个可搜索、可分页的表react组件

工作示例：

用法

实际上，我没有在组件中编写3个子组件，

SearchBar

，

Table

，

PaginationBar

所以我很难重写它来呈现道具的方式来改变顺序，如下所示

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

但是如果我把它改成3个组件，我必须重写成

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

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

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

---

提前感谢。

在PaginationTable组件中更改您的

呈现

函数，在返回语句之前，将元素分配给变量（搜索栏、表格、分页栏等），然后在呈现函数中引用这些变量

---

我在这里修改了您的示例

请包含所有必要的代码（但最少；）。特别是，如果您不向我们显示

呈现

代码，我们无法帮助您在

分页表

的

呈现

中执行操作。React的版本是什么？我这样问是因为解决方案可能涉及到，添加到v16中，并且可以在v16.2及以后版本中变得更加优雅。很抱歉在我发布后没有留下来。我用的是React 16.5。在工作示例中，渲染代码大约有100行，我认为这个问题太长了，所以我没有再做一个最小的问题。稍后我会将我的问题编辑为最小的问题。谢谢。欢迎来到Stack Overflow！谢谢你的贡献！请环顾四周，通读这本书。因此，问题和答案必须是独立的。在答案文本中包含所有相关代码更改，而不仅仅是作为链接。原因有二：人们不应该为了完全理解答案而离开现场；链接腐烂，使问题及其答案对未来的人们毫无用处。（OP的问题也有同样的问题。）哇！我用同样的方法做，但得到了完全不同的结果。我在render函数中创建了3个实组件，例如

constsearchbar=（）=>（）

；然后以return（..）的形式返回它们，但这样，在我在搜索栏上键入文本后，我丢失了鼠标foucs，然后我意识到它每次都会更新我的dom。谢谢我不应该将它们更改为组件。我应该只将它们更改为javascript变量。很高兴我能够提供帮助：）

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

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

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

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

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
}