从渲染道具重用 React 组件

Question

我用render props的方式写了一个react组件，它会用3个react组件对象调用children函数（具体名字不知道，执行jsx生成的变量(<div>...</div>)）；

<PaginatedTable> 用法示例：

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

使用渲染道具，我很高兴我可以非常轻松地自定义这三个子组件对象，例如重新排列顺序或在这三个之间添加自定义元素。

{({ SearchBar, Table, PaginationBar })=>
        (<div>
            {PaginationBar}
            <h1> my custom search bar text </h1>
            {SearchBar}
            {Table}

        </div>)
    }

但现在我希望的不仅仅是在里面排列顺序，我希望我可以将 {SearchBar} 移出到同层的兄弟的孩子比如这张图片。

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

我认为这可能是 React 单向数据流的反模式。

将{SearchBar} 提取到另一个独立组件，然后在<ToolBarArea /> 中将其用作<SearchBar ... />，这是我从React Doc 中学到的。

但是通过这种方式，我必须“提升状态”并编写类似的功能和在<PaginationTable /> 中已有的状态，如下所示**文本**部分是在<PaginationTable /> 中已有的功能和状态

class ToolBarArea extends Component{
    render(){
        return(
        <div>
            // text
            <SearchBar onChange={**this.props.onSearchBarChange**} />
            //.... other text or elements
        </div>);
    }
}
class ContainerArea extends Component {
    state={
        **searchBarText:'',**
        tableData : [{...}, {...}]
    }
    **onSearchBarTextChange = (event)=>{
        this.setState({ searchBarText: event.target.value });
    }
    filterdTableData = ()=> this.state.tableData.filter(d=>d.name.includes(this.state.searchBarText);
    **
}

我真的希望有一种方法可以简单地将 render props 函数中的变量 {SearchBar} 移到不知道是在父级或父级的兄弟姐妹中还是在 DOM 树中的任何位置。

比如

<ToolBarArea>
    {SearchBar} // SearchBar from <PaginationTable />
</ToolBarArea>

有没有办法重用onSearchBarTextChange 和filtedTableData 函数以及我已经在<PaginationTable /> 中编写的这些**文本**代码？

Answer 1

我相信当您提到提升状态时，您会一针见血。如果您已经编写了类似的函数，那么您最好的选择可能是“抽象”该函数，以便它适用于两个用例。您可以使用一个简单的标志来区分每个需要的独特执行。然后最后将函数传递给两个组件。

如果您坚决避免这种方法，您可以通过使用事件侦听器来处理数据传输或观察window 中的变量，从技术上绕过它，但这肯定是一种反模式。