Как изменить реквизит не непосредственных детей - PullRequest
0 голосов
/ 13 июня 2019

Я переношу свой сайт из стека 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 в компонентах с соответствующими реквизитами; Я чувствую, что это было бы очень неэффективным, нежелательным решением для чего-то, что, по моему мнению, должно быть относительно простым.

Ответы [ 2 ]

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

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

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

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

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

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

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

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...