Повторно использовать компонент React из реквизита рендера

Question

Я написал компонент реагирования способом рендеринга реквизита, он будет вызывать функцию потомков с 3 объектами компонента реакции (точно не знаю, какое имя, переменная, сгенерированная при выполнении jsx (<div>...</div>));

<PaginatedTable> Пример использования:

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

с реквизитами рендеринга, я так рад, что могу очень легко настроить эти 3 дочерних компонента, такие как упорядочить порядок или добавить пользовательские элементы между этими тремя.

{({ 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 />, как показано ниже ** текст ** части - это функции и состояния, которые уже были в <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} в функцию рендеринга реквизитов, не зная, находится ли она в родительском или родительском элементе или где-нибудь в дереве DOM.

например

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

Есть ли способ повторно использовать функции onSearchBarTextChange и filtedTableData и эти ** текстовые ** коды, которые я уже написал в <PaginationTable />?

Answer 1

Я полагаю, что вы ударили ноготь по голове, когда упомянули о состоянии подъема.Если вы уже написали подобную функцию, то лучше всего «абстрагировать» эту функцию, чтобы она применялась в обоих случаях использования.Вы можете использовать простой флаг, чтобы дифференцировать уникальное выполнение, в котором нуждается каждый.Затем, наконец, передайте функцию обоим компонентам.

Если вы непреклонны в отношении отказа от этого подхода, вы можете технически обойти его, используя прослушиватели событий для обработки передачи данных или наблюдения за переменными в window, но этонаверняка анти-паттерн.