javascript - 从渲染 Prop 中重用 React 组件

Question

我用 render props 的方式写了一个 React 组件，它将用 3 个 React 组件对象调用子函数(具体名称不确定，是执行 jsx (<div>...</div>) 生成的变量)；

<PaginatedTable>使用示例:

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

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

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

        </div>)
    }

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

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

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

摘录{SearchBar}到另一个独立组件，然后将其用作 <SearchBar ... /> <ToolBarArea />里面这是我从 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);
    **
}

我真的希望有一种方法可以简单地移动变量 {SearchBar}在渲染 props 函数中，不知道它是在父级、父级的兄弟级还是 DOM 树中的任何位置。

比如

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

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

Answer 1

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

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