重用渲染道具中的React组件

Question

我以render props的方式编写了一个react组件，它将使用3个react组件对象（不确定名称，确切地说是通过执行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}提取到另一个独立组件中，然后将其用作<SearchBar ... />内的<ToolBarArea />，这是我从React Doc中学到的。

但是以这种方式，我必须“提升状态”并编写类似<PaginationTable />中已经存在的功能和状态，如下所示** text **部分是{{1}中已经具有的功能和状态}

<PaginationTable />

我真的希望有一种方法可以简单地将render props函数中的变量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); ** } 移到其中，而无需知道是在父级或父级的同级中还是在DOM树中的任何位置。

例如

{SearchBar}

是否可以重用<ToolBarArea> {SearchBar} // SearchBar from <PaginationTable /> </ToolBarArea> 和onSearchBarTextChange函数以及我已经在filtedTableData中编写的这些** text **代码？

Answer 1

我认为提到提起状态时，您会碰到头。如果您已经编写了类似的函数，那么最好的选择是“抽象”该函数，以便将其应用于两个用例。您可以使用一个简单的标志来区分每种需要的唯一执行。最后，将功能传递给两个组件。

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