Метод рендеринга реквизита без вложенности элемента dom - PullRequest
Новая
       7

Метод рендеринга реквизита без вложенности элемента dom

0 голосов
/ 15 июня 2019

В сущности, у меня есть следующее внутри реагирующего функционального компонента: 

<div className="content">
<div className="filters">
    <MyFilter1 data={data}>
        {(filter1Data) => {
            return <MyFilter2 data={filter1Data}>
                {(finalData) => {
                    return <div className="final-data">{finalData}</div>
                }}
            </MyFilter2>
        }}
    </MyFilter1>
</div>

<div className="filtered" />

Я использую несколько фильтров с парадигмой рендеринга детей, чтобы получить окончательные данные. Но из-за (по общему признанию) разочаровывающих стилей я хотел бы отобразить окончательные данные в div вне местоположения фильтров (в данном случае внутри «фильтрованного» div). Как я могу это сделать? Мой подход неверен? Является ли «фильтр с отрисовкой потомков» неправильным подходом?

Я пытался:

Реагирует на портал с помощью createRef (), в сущности, проблема в том, что ссылка еще не доступна, когда вызывается функция 'finalData'.

Edit:

Сами компоненты фильтра очень сложны, но я могу привести пару примеров. Данные, которые я фильтрую, - это простой объект с 12-ю свойствами. Один из фильтров реализован в виде последовательности флажков, определяющих, какие свойства данных я хочу отобразить (необходимо как отдельный компонент из-за количества полей). Одним из свойств данных является цена, а другим фильтром является «номеронабиратель» ценового диапазона, который указывает отображаемый ценовой диапазон (он же исключает точки данных вне диапазона).

...