reactjs - 如何使用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]。

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

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() 将 start at index 1而不是 0，React 对嵌套数组非常满意。

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

Typescript 更新

您可以在 Typescript 中使用它(没有类型不安全的 any)，并在 .map() 上使用 React.ReactNode 类型参数:

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