如何在反应组件中显示字符串数组

Question

我试图通过执行以下操作在我的反应组件中的不同行上显示一个字符串数组：

        <div>
          {this.props.notifications.join('\n')}
      </div>

但是，这似乎不起作用。 this.props.notifications 是我想在 div 中呈现的字符串数组。有谁知道我该如何解决这个问题？

原文由 blazerix 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 <p /> 渲染每一行怎么样？

 <div>
   {this.props.notifications.map(txt => <p>{txt}</p>)}
</div>

这将在不同的段落中呈现每个元素。

原文由 Crysfel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我希望每个字符串都在单独的一行上。

在渲染中使用 Array/map() ：

 <div>
  { this.props.notifications.map(notification => <p>{ notification }</p>) }
</div>

原文由 Aaron Beall 发布，翻译遵循 CC BY-SA 3.0 许可协议