如何在React JSX中除最后一个元素之外的每个元素之后在array.map中添加逗号

Question

如何在数组的每个元素之后添加一个尾随逗号来制作如下列表:

INV, INV, INV, INV

请注意,最后一个元素没有尾随逗号

目前正在迭代列表array.map:

var List = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.data.map(function(item) {
          return <div>{item}</div>;
        })}
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

React.render(<List data={data} />, document.body);

Answer 1

评论你可以使用:

array.map((item,index)=>({(index？',':'')+ item}))

此外,由于您想要内联显示文本,因此使用div是不合适的.相反,你可以/应该使用内联元素span

var List = React.createClass({
  render: function() {
    return (
      <div>
        {
          this.props.data.map(function(item, index) {
            return <span key={`demo_snap_${index}`}>{ (index ? ', ' : '') + item }</span>;
          })
        }
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

ReactDOM.render(<List data={data} />, demo);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

Answer 2

您可以做的是，检查项目的索引，如果索引不等于最后一个项目，则渲染，,否则什么也不渲染。

像这样写：

{
    this.props.data.map((item, i, arr) => <span>{item} {i != (arr.length-1) ? ',' : ''}</span>)
}

您还可以将总数据长度存储在单独的变量中，而不是arr.length在每次迭代中检查该变量。

工作示例：

{
    this.props.data.map((item, i, arr) => <span>{item} {i != (arr.length-1) ? ',' : ''}</span>)
}

var List = React.createClass({
  render: function() {
    return (
      <div>
        {
	   this.props.data.map((item, i, arr) => <span>{item} {i != (arr.length-1) ? ', ' : ''}</span>)
        }
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

ReactDOM.render(<List data={data} />, document.body);

Answer 3

使用CSS 相邻兄弟组合子(+)将伪元素(::before)与逗号添加到所有兄弟项目,但第一个:

var List = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.data.map(function(item) {
          return <div className="item">{item}</div>;
        })}
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

ReactDOM.render(<List data={data} />, demo);

.item {
  display: inline-block;
}

.item + .item::before {
  display: inline-block;
  white-space: pre;
  content: ", ";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>