如何使用 map 和 join 渲染 React 组件?

小能豆

如何使用 map 和 join 渲染 React 组件?

javascript

我有一个组件将显示字符串数组。代码如下：

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

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

阅读 47

2024-06-05

共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()如果没有第二个参数，则会抛出空数组。通常这不应该是个问题，因为无论如何您都希望为空数组显示一条自定义消息，例如“这是空的”。

Typescript 更新

您可以在 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>
  }
}

2024-06-05