javascript - 通过 React 组件传递数组

Question

这里尽量保持简单。

我有一些数据。它包含一个对象列表，我们将调用 items。我循环遍历 items，并将各种属性传递给组件，如下所示:

  render: function(){
    var itemList = [];

    items.forEach(function(item){
      itemList.push(<Component name={item.name} tags={item.tags} />)
    })
    return(
      <ul id="item-list">
        {itemList}
      </ul>
    )
  }

所以这里的问题是 item.tags 是一个数组。在我的组件中，我只是做一些简单的事情，比如显示名称，然后遍历标签以显示它们:

  render: function(){
    var tags = [];

    this.props.tags.forEach(function(tag){
      tags.push( <li>{tag}</li> />)
    })
    return(
      <li>
        <h1>{this.props.name}</h1>
        <ul>
          {tags}
        </ul>
      </li>
    )
  }

在组件内部，标签是未定义的。

我在做什么/我做错了什么，因为我是 React 的新手。谢谢!

Answer 1

可能需要更多代码才能提供帮助。

如果您的 Component类被赋予了 tags Prop ，this.props.tags将始终是对它的引用。

你有没有机会做一些有趣的事情，比如cloneWithProps ，或使用动态 <Component/>类(class)？

您可以尝试传入 item作为prop , 并拉出组件中的标签。

<Component item={item}/>

这会让你更容易明白为什么 tags不可用。