通过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/>类？

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

<Component item={item}/>

这将让您更容易看到tags不可用的原因。