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

Question

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

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]。

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

Answer 1

一个简单的解决方案是不使用reduce()第二个参数且不传播先前的结果：

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}

如果没有第二个参数，reduce()它将从索引1而不是0开始，并且React非常满意嵌套数组。

如评论中所述，您只想将此数组用于至少包含一项的数组，因为reduce()没有第二个参数将抛出一个空数组。通常，这应该不成问题，因为无论如何，您都想显示一条自定义消息，对空数组说类似“
this is empty”。

打字稿更新

您可以在Typescript中使用此参数（不带type-unsafe any），其React.ReactNode类型参数为.map()：

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map<React.ReactNode>(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}