如何在数组的每个元素后添加尾随逗号以制作如下列表：
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>使用 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>你可以做的是，检查项目的索引，如果索引不等于最后一个项目，,否则什么都不渲染。
像这样写：
{
this.props.data.map((item, i, arr) => <span>{item} {i != (arr.length-1) ? ',' : ''}</span>)
}
您还可以将总数据长度存储在单独的变量中，而不是arr.length在每次迭代中检查该变量。
工作示例：
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);<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>const data = ["red", "green", "blue"];
class List extends React.Component{
render(){
return(
<div>
{this.props.data.map((item, index) => {
return <span>{ (index ? ', ' : '') + item }</span>;
})}
</div>
)
}
}
ReactDOM.render(
<List data={data}/>,
document.getElementById('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>