Question

我已经构建了一个反应应用程序，该应用程序显示JSON文件中的项目，它由4个主要组件组成， Items.js ，它与道具（标题和图像）一起创建了项目本身， Itemlist.js ，其中显示了来自 items.js 和其他功能的项目。

MenuCat 映射并显示json中的每个类别，每单击该类别，它都会向 Itemlist.js 返回一个数字（props），并将其添加到映射功能中项的内容为（children [{props here}]。children [] ....），以便它使用其json索引映射每个点击类别的所有项。

每当单击一个项目时，它都会在称为抽屉的弹出窗口中显示更多JSON属性，例如促销，该弹出窗口的内容来自 Modifiers.js 。

我需要一个与 MenuCat.js 的类别点击类似的功能，但带有项，而是显示项的确切子项（例如Burger 1在单击时显示出沙漠促销1，而burger图2显示了沙漠促销2）。按照现在的设置方式，它只显示所有项目的沙漠促销1。

沙箱（在app.js上的当前视图）：https://codesandbox.io/embed/8j5mmrjk2?fontsize=14&moduleview=1

Answer 1

我注意到您的组件存在的一个问题是您正在传递key属性。这是React does not pass down ref or key props的反模式。

如果您需要在子组件中访问相同的值，则应将其作为其他属性（例如：<ListItemWrapper key={result.id} id={result.id} />）传递。

只需将其作为其他属性（例如myKey）传递下来即可。

我还做了一些其他调整，您可以在forked sandbox中进行检查。最值得注意的是，我添加了一个状态值来跟踪被单击的子索引。

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>
 )
)}

商品的独特onclick

1 个答案: