在React组件中传递一个数组

Pass an array through a React component

本文关键字：一个 数组 React 组件      更新时间：2023-09-26

尽量保持简单。

我有一些数据。它包含一个对象列表，我们称之为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的新手。谢谢!

可能需要更多的代码来帮助。

如果你的Component类被给予tags prop, this.props.tags将始终是对它的引用。

是否有机会你正在做一些有趣的事情，如cloneWithProps，或使用动态<Component/>类?

您可以尝试将item作为prop传入，并在组件中取出标签。

<Component item={item}/>

这将使您更容易看到为什么tags不可用

相关文章：