Уникальный клик

Question

Я создал приложение реагирования, которое показывает элементы из файла JSON, оно состоит из 4 основных компонентов, Items.js , которое создало сам элемент вместе с его подпорками (заголовок и изображение), Itemlist.js , который показывает элементы из items.js и других функций.

MenuCat отображает и отображает каждую категорию из json, а также при каждом нажатии на эту категориюон возвращает число (props) в Itemlist.js , добавляя его к функции отображения элементов как (children [{props here}]. children [] ....), так что он отображает все элементыкаждая категория, по которой щелкнули, используя свой индекс json.

При каждом щелчке по элементу отображаются дополнительные свойства JSON, такие как рекламные объявления внутри всплывающего окна с названием ящика, содержимое этого всплывающего окна происходит из Modifiers.js.

Мне нужна функция, похожая на MenuCat.js в категории щелчков, но с элементами вместо них, где отображаются точные дочерние элементы элемента (например, Burger 1 показывает пустынную рекламу).1 на клик, и гамбургер2 показывает пустыню промо 2).То, как он настроен сейчас, показывает только промо 1 пустыни для всех предметов.

Песочница (текущий вид на app.js): https://codesandbox.io/embed/8j5mmrjk2?fontsize=14&moduleview=1

Answer 1

Одна проблема, которую я заметил с вашими компонентами, заключалась в том, что вы передавали атрибут key.Это анти-паттерн, так как React не передает ref или реквизиты ключа .

Если вам нужно получить доступ к тому же значению в дочернем компоненте, вы должны передать его какдругой реквизит (например: <ListItemWrapper key={result.id} id={result.id} />).

Просто передайте его как другой атрибут, такой как myKey.

Я сделал несколько других настроек, которые вы можете проверитьв раздвоенной песочнице 1015 *.В частности, я добавил значение состояния для отслеживания дочернего индекса, по которому щелкнули.

this.state = {
  itemSelected: 0
}

...

{items.children[selected].children[itemSelected].children.map(
  (item, index) => (
    <Modifiers
       key={index}
       title={item.name}
       myKey={index}
       childp={item.children[index].name}
    >
      {" "}
    </Modifiers>
 )
)}