Question

这可能是超级愚蠢的问题，但需要帮助。我该如何加入下面的用户名并用","隔开？

代码：

var users = ["fer", "jyujyu", "jhwevhfwfv"]

    <div>
      {users.map(function(user){
                  return <span key={user}className="user">{user}</span>
                })}
              </div>

在哪里可以在此处应用联接以在名称之间添加逗号：预期的o / p：

fer, jyujyu, jhwevhfwfv

Answer 1

let numbers = [1, 2, 3].join(",").split("");

const listItems = numbers.map(number => (
    <span key={number.toString()}>{number}</span>
));
console.log(listItems);
return <div>{listItems}</div>;

我已经更新了答案。由于join将数组转换为字符串，因此我们无法直接在react组件中进行渲染。我已经转换为数组以避免此问题。请参见以下工作示例： https://codesandbox.io/s/ymvl8olpxx

Answer 2

这是处理reduce的简单方法：

var users = ["fer", "jyujyu", "jhwevhfwfv"]
<div>
  {
    users
      .map(function(user){
              return <span key={user} className="user">{user}</span>
            })
      .reduce(function(prev, next){
        if(Array.isArray(prev))
          return prev.concat(<span>, </span>).concat(next)
        else return [prev, (<span>, </span>), next]
    })
  }
</div>;

Here is a codepen example

Answer 3

如果只想显示数组中的所有项目，则不需要映射。

var users = ["fer", "jyujyu", "jhwevhfwfv"]

使用array join，您应该能够显示跨度中的所有项目

users.join(', ')将为您提供预期的输出，它将数组的所有项目与您指定的内容连接在一起，并返回一个字符串。

将所有内容放在一起。

var users = ["fer", "jyujyu", "jhwevhfwfv"]

<div>
  {
    <span className="user">{users.join(', ')}</span>
  }
</div>

这是此工作https://codesandbox.io/s/znrj1nopox的沙箱链接

Answer 4

我会尝试做这样的事情（基于先前的答案）：

var users = ["fer", "jyujyu", "jhwevhfwfv"];
var spannedUsers = users.map((user) => <span key={user} className="user">{user}</span>);
<div>
    {spannedUsers.join(", ")}
</div>

如何使用join方法在数组名称之间添加逗号

4 个答案: