Question

我有一个反应组件正在渲染一些结果。我遇到的问题是result.participants。这是一个数组，因此map渲染两个名称没有任何间距，我发现很难插入这些空格。

result.participants是一个字符串数组。

如果长度> 1，如何插入空格或逻辑以放入逗号和空格？

render: function(){
  return (
  <ul>
    {
      this.state.pads.map(function(result){
        return [
        <a href={result.pageUrl}>{result.title}</a>,
        <li key={result.participants}>Participants: {result.participants} </li>,
        <li key={result.summary}>Summary: {result.summary}</li>,
        <li key={result.lastEdit}>Last Edited: {new Date(result.lastEdit).toDateString()} </li>,
        <p></p>
        ];
      })}
  </ul>
)
}

Answer 1

如果您不关心在<span>中包装每个参与者，您只需使用内置的Array.prototype.join方法：

<li key={result.participants}>Participants: {result.participants.join(', ')} </li>,

Answer 2

与提及的评论者一样，您不应直接将<a>和<p>标记放入<ul>。但这不是重点，这个问题是关于React中的数组处理。

您应该能够使用嵌套在JSX中的控制流结构，如下所示：

{
  result.participants.map(function(participant, idx) {
    if (idx == result.participants.length - 1) {
      return (
        <span>{participant}, </span>
      );
    } else {
      return participant;
    }
  })
}

映射返回中的React Render数组

2 个答案: