Reactjs 呈现以逗号分隔的链接列表

我试图输出一个逗号分隔的链接列表，这是我的解决方案

var Item = React.createComponent({
  render: function() {

    var tags = [],
        tag;

    for (var i = 0, l = item.tags.length; i < l; i++) {
      if (i === item.tags.length - 1) {
        tag = <span><Tag key={i} tag={item.tags[i]} /></span>;
      } else {
        tag = <span><Tag key={i} tag={item.tags[i]} /><span>, </span></span>;
      }
      tags.push(tag);
    }

    return (
      <tr>
        <td>
          {item.name}
        </td>
        <td>
          {tags}
        </td>
      </tr>
    );

  }
});

var Item=React.createComponent({
render:function（）{
var标记=[]，
标签；
对于（变量i=0，l=item.tags.length；i

我只是想知道是否有更好、更干净的方法来实现这一点

---

谢谢

在Khan Academy，我们使用了一个名为

intersperse

的助手：

/*散布：返回一个数组，其中分隔符散布在
*输入数组的每个元素。
*
*>([1,2,3]）。散布（0）
* [1,0,2,0,3]
*/
功能穿插（arr、sep）{
如果（arr.length==0）{
返回[]；
}
返回arr.slice（1）.reduce（函数（xs，x，i）{
返回x.concat（[sep，x]）；
}，[arr[0]]；
}

它允许您编写如下代码：

var tags = item.tags.map(function(tag, i) {
    return <Tag key={i} tag={item.tags[i]} />;
};
tags = intersperse(tags, ", ");

var tags=item.tags.map（函数（tag，i）{
返回；
};
标记=散布（标记“，”）；

或者简单地将列表项写入无序列表并使用CSS

var Item = React.createComponent({
  render: function() {

    var tags = this.props.item.tags.map(function(i, item) {
      return <li><Tag key={i} tag={item} /></li>
    });

    return (
      <tr>
        <td>
          {this.props.item.name}
        </td>
        <td>
          <ul className="list--tags">
            {tags}
          </ul>
        </td>
      </tr>
    );

  }
});

---

这是一个允许

s和

s和垃圾作为分隔符的解决方案：

const createFragment = require('react-addons-create-fragment');

function joinElements(arr,sep=<br/>) {
    let frag = {};
    for(let i=0,add=false;;++i) {
        if(add) {
            frag[`sep-${i}`] = sep;
        }
        if(i >= arr.length) {
            break;
        }
        if(add = !!arr[i]) {
            frag[`el-${i}`] = arr[i];
        }
    }
    return createFragment(frag);
}

const createFragment=require（'react-addons-create-fragment'）；
函数joinElements（arr，sep=
）{
设frag={}；
for（设i=0，add=false；；++i）{
如果（添加）{
frag[`sep-${i}`]=sep；
}
如果（i>=arr.length）{
打破
}
如果（添加=！！arr[i]）{
frag[`el-${i}`]=arr[i]；
}
}
返回createFragment（frag）；
}

它也会过滤掉错误的数组元素。我用它来格式化地址，其中一些地址字段没有填写

---

它使用片段来避免关于缺少钥匙的警告。

简单地说

{tags.map（（tag，i）=>
{i>0&&“，”}
)}

在React 16中，可以做得更简单：

{tags.map（（tag，i）=>[
i>0&“，”，
])}

不带额外标签的解决方案

<p className="conceps inline list">
  {lesson.concepts.flatMap((concept, i) =>
    [concept, <span key={i} className="separator">&#8226;</span>]
  , ).slice(-1)}
</p>

{lesson.concepts.flatMap（（concept，i）=>
[概念&"8226；]
，）.slice（-1）}

生成类似于

函数•函数类型•高阶函数•部分应用简单一个：

{items.map((item, index) => (
    <span key={item.id}>
      {item.id}
      {index < items.length - 1 && ', '}
    </span>
 ))}

{items.map（（项目，索引）=>(
{item.id}
{index

从“React”导入React；
从“lodash”导入{compact}；
//无论您想用逗号、空格、边框分隔您的项目。。。
常量分隔符=（）=>{…}；
//有助于包装应分开的项目
带分隔符的常量=（{children，…props}）=>{
//_u.compact将删除错误值：在执行条件渲染时非常有用
常量数组=compact（React.Children.toArray（Children））；
返回array.map（（childrenItem，i）=>(
{i>0&&}
{childrenItem}
));
};
常量MyPage=（）=>(
弗斯特
{second&&（可能是second）}
{第三&&（也许第三）}
第四
);

最简单的方法

    const elementsArr = ["a","b,"c"];
    let elementsToRender = [] ;
    elementsArr.forEach((element, index) => {
        let elementComponent = <TAG className="abc" key={element.id}>{element}</TAG>
        elementsToRender.push(elementComponent);
        if(index !== (elementsArr.length - 1)){
            elementsToRender.push(", ");
        }
    });

    render(){
        return (
            <div>{elementsToRender}</div>
        )
    }

const elementsArr=[“a”、“b”、“c”]；
让elementsToRender=[]；
elementsArr.forEach（（元素，索引）=>{
让elementComponent={element}
elementsToRender.push（elementComponent）；
如果（索引！==（elementsArr.length-1））{
elementsToRender.push（“，”）；
}
});
render（）{
返回(
{elementsToRender}
)
}

一个功能组件，它完成了这个技巧。灵感来自@imos的响应。适用于React 16

const Separate = ({ items, render, separator = ', ' }) =>
  items.map((item, index) =>
    [index > 0 && separator, render(item)]
  )

<Separate
  items={['Foo', 'Bar']}
  render={item => <Tag tag={item} />}
/>

constseparate=（{items，render，separator='，'}）=>
items.map（（项目，索引）=>
[索引>0&分隔符，呈现（项目）]
)
}
/>

添加到Ramda上面的伟大答案中

要用逗号分隔一组项目，可以执行以下操作：

const makeLinks = (x: Result[]) =>
  intersperse(<>,</>, map(makeLink, x))

constmakelinks=（x:Result[]）=>
点缀（、贴图（makeLink，x））

---

非常简洁

这种方法确实不明确我喜欢这种方法。我只是使用了

.csv

类并使其与任何元素一起工作：

.csv>*

，而不仅仅是

ui>li

，这是完全可以理解的。我喜欢这种方法，因为它是语义的，而且据我所知，它对可访问性更有效。你知道如何合作吗uld是否将一个元素（如

）作为第二个参数传递？它确实有效，但我收到一条关于未指定键的警告…我尝试将

包装到函数中（并生成一个随机键）但这似乎不太正确或不起作用。我只是意识到这是我可以做到的；传递一个函数作为分隔符，接受和idx，然后使用数组减缩器的索引作为键。类似于Sweet and Simple！@imos，你介意解释一下吗？

{！！I&&“，”}

@Macxim这行在每个标记前打印逗号，第一个标记除外。Expression

！！i

只是将

i

转换为布尔值。另外

！！i

可以被

i>0

@imos替换。非常感谢。这是我见过的最好的每字符值答案之一。我应该建议将其迁移到code Golf吗？=）

const Separate = ({ items, render, separator = ', ' }) =>
  items.map((item, index) =>
    [index > 0 && separator, render(item)]
  )

<Separate
  items={['Foo', 'Bar']}
  render={item => <Tag tag={item} />}
/>

const makeLinks = (x: Result[]) =>
  intersperse(<>,</>, map(makeLink, x))