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

发布于12月19日

如何在数组的每个元素后添加一个尾随逗号，以生成如下列表:

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);

推荐答案

如前所述，您可以使用:

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>