Как изменить реквизит не непосредственных детей

Question

Я переношу свой сайт из стека LAMP в стек MERN. На старом сайте у меня был выпадающий список, где кнопка переключала бы отображение div одного из родных братьев и сестер. Структура выглядела так:

<div class="header">
    <div class="header-option">Option 1</div>
    <div class="header-option" id="toggle-dropdown">Option 2</div>
    <div class="header-option">Option 3</div>
</div>
<div id="dropdown-content">
    Lorem ipsum
</div>

Я бы использовал JQuery для определения щелчка по #toggle-dropdown и затем переключал бы отображение #dropdown-content. Я превратил это в плагин многократного использования, который можно использовать по всему сайту. Теперь я хотел бы сделать что-то подобное в React с повторно используемым компонентом. Но я не могу найти лучшую практику для доступа и изменения реквизита не непосредственных детей. Я бы, конечно, обернул все это в <Dropdown> компонент, чтобы обработать состояние и иметь возможность абстрагировать процесс.

То, о чем я думал и нашел до сих пор:

1. Повторяется через детей, их детей и т. Д., Ищет displayName и затем клонирует ребенка; но я не верю, что это работает в производстве.
2. Перенос JSX в качестве реквизита верхнего и нижнего колонтитула в Dropdown, а затем попытка сгенерировать DropdownButton и DropdownContent в компонентах с соответствующими реквизитами; Я чувствую, что это было бы очень неэффективным, нежелательным решением для чего-то, что, по моему мнению, должно быть относительно простым.

Answer 1

хорошо, так что у вас есть:

<Header>
   <Option />
   <Option onClick={this.handleDropdownclick} props={props}>
      <Dropdown>
   </Option>
   <Option />
</Header>

правильно? просто передайте обработчик onClick нужному параметру, нет? Или я не понял, о чем ты спрашиваешь?

Если ваше дерево очень глубокое, и вы не хотите пропускать каждую опору вручную, можете использовать Context? https://reactjs.org/docs/context.html#contextconsumer

Answer 2

Вы думаете, что это неправильно.Вы не должны изменять состояние родителя (или реквизит) от одного из его детей.У вас может быть компонент Контейнер, который ожидает получения переключенного содержимого ...

const CollapseContainer = ({ placeholder, children }) => {
    const [collapsed, toggler] = useState(false)
    return (
        <>
            <button onClick={() => toggler(!collapsed)}>{placeholder}</button>
            {
                collapsed &&
                { children }
            }
        </>
    )
}

И использовать его так:

<CollapseContainer placeholder='Click'>
     <p>Only show on click</p>
</CollapseContainer>