Question

我有两个组件。一位家长叫菜单，一位家长叫食物。所以在菜单中，我有一行代码：

{this.props.menu ? Object.keys(this.props.menu).map((key, index) => 
    <div
      className="tab-pane fade"
      id={key}
      role="tabpanel"
      aria-labelledby={key + "-tab"}
    >
      <Food key={key} menu={this.props.menu}/>
    </div>
  ) : 'loading'
}

所以我试图将“关键”传递给食物并在这行代码中使用，如下所示：

{this.props.menu? this.props.menu[key].map((d) => <h1>{d.name}</h1>) : 'loading'}'

但是，我一直未定义密钥。我从来没有将这样的东西传递给子组件，所以不确定是我传递错误还是其他什么。

Answer 1

key 是 react 中的保留属性。框架处理它并将其从 props 集合中删除。因此，当您尝试使用 props.key 访问它时，它是未定义的。正如@Drew Reese 所说，你最好使用不同的道具名称。

Answer 2

可能是你没有定义key的值。

Object.keys(this.props.menu) -> 它会给你一个对象键的数组。

示例 obj = {"a": 1, "b":2}。 Object.keys(obj) --> ["a","b"]

然后你在数组上使用地图。它将遍历数组的每个元素。 Object.keys(obj).map( (key,index) => { } ) ==>。键是数组项，索引是项在数组中的位置。

当我们在 react 中循环重复项时使用键。

{this.props.menu? this.props.menu.map((d) => <h1 key={d.name}>{d.name}</h1>) : 'loading'}'

传递给子组件

2 个答案: