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）=＆gt;（{（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

使用CSS adjacent sibling combinator（+）将逗号元素（::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>

Answer 3

你可以做的是，检查项目的索引，如果index不等于最后一个项目，那么,就没有了。

像这样写：

{
    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>

Answer 4

[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary:
[INFO]
[INFO] parent ............................................. SUCCESS [  6.246 s]
[INFO] Shared code ........................................ SUCCESS [ 19.727 s]
[INFO] Wikidata Query RDF Testing Tools ................... SUCCESS [  9.955 s]
[INFO] Blazegraph extension to improve performance for Wikibase FAILURE [ 16.945 s]
[INFO] Blazegraph Service Package ......................... SKIPPED
[INFO] Wikidata Query RDF Tools ........................... SKIPPED
[INFO] Wikibase RDF Query Service ......................... SKIPPED
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 54.513 s
[INFO] Finished at: 2017-12-19T10:58:12+00:00
[INFO] Final Memory: 58M/420M
[INFO] ------------------------------------------------------------------------


[ERROR] Failed to execute goal on project blazegraph: Could not resolve dependencies for project org.wikidata.query.rdf:blazegraph:jar:0.3.0-SNAPSHOT: The following artifacts could not be resolved: com.blazegraph:bigdata-cache:jar:2.1.5-SNAPSHOT, com.blazegraph:bigdata-client:jar:2.1.5-SNAPSHOT, com.blazegraph:bigdata-common-util:jar:2.1.5-SNAPSHOT, com.blazegraph:bigdata-core:jar:2.1.5-SNAPSHOT, com.blazegraph:bigdata-util:jar:2.1.5-SNAPSHOT, com.blazegraph:ctc-striterators:jar:2.1.5-SNAPSHOT: Could not find artifact com.blazegraph:bigdata-cache:jar:2.1.5-SNAPSHOT in wmf.mirrored (http://archiva.wikimedia.org/repository/mirrored)

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

Answer 5

只需这样做：

<div>{array.join(',')}</div>

Answer 6

我知道这已经晚了，但这是迄今为止最简单的没有任何功能的方法。在内联语句中效果很好，如果您的情况需要，则不需要单独的函数或映射。

const items = [1, 2, 3, 4, 5];

console.log("Items: " + "" + items + ".")

由于某种原因，数组前的 ""+ 添加了逗号，我不完全明白为什么。

Answer 7

试试 array.toString()

你会得到INV, INV, INV, INV

如何在除了React JSX

7 个答案: