如何通过使用map和join来渲染React组件

reactjs React.js

神奇神无

2020-03-12

我有一个要显示字符串数组的组件。代码看起来像这样。

React.createClass({
  render() {
     <div>
        this.props.data.map(t => <span>t</span>)
     </div>
  }
})

运行正常。例如，如果props.data = ['tom'，'jason'，'chris'] 页面中的渲染结果将为tomjasonchris

然后，我想使用逗号连接所有名称，因此我将代码更改为

this.props.data.map(t => <span>t</span>).join(', ')

但是，渲染的结果是[Object]，[Object]，[Object]。

我不知道如何解释对象成为要渲染的反应组件。有什么建议吗？

第1303篇《如何通过使用map和join来渲染React组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
SamGreen 2020.03.12

使用嵌套数组将“，”保留在外面。

  <div>
      {this.props.data.map((element, index) => index == this.props.data.length - 1 ? <span key={index}>{element}</span> : [<span key={index}>{element}</span>, ", "])}
  </div>

通过将数据保存到数组并修改最后一个元素而不是始终检查其最后一个元素来对其进行优化。

  let processedData = this.props.data.map((element, index) => [<span key={index}>{element}</span>, ", "])
  processedData [this.props.data.length - 1].pop()
  <div>
      {processedData}
  </div>
GilL 2020.03.12

接受的答案实际上返回一个数组数组，因为prev每次都会是一个数组。React足够聪明，可以完成这项工作，但是将来很容易引起问题，例如在为每个映射结果提供键时会破坏Reacts差异算法。

这项新React.Fragment功能使我们能够以一种易于理解的方式执行此操作，而不会出现潜在的问题。

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map((t, index) => 
            <React.Fragment key={index}>
              <span> {t}</span> ,
            </React.Fragment>
          )
      </div>
  }
}

通过React.Fragment我们可以简单地将分隔符放置在,返回的HTML之外，React不会抱怨。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android