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

  }
});

/* intersperse: Return an array with the separator interspersed between
 * each element of the input array.
 *
 * > _([1,2,3]).intersperse(0)
 * [1,0,2,0,3]
 */
function intersperse(arr, sep) {
    if (arr.length === 0) {
        return [];
    }

    return arr.slice(1).reduce(function(xs, x, i) {
        return xs.concat([sep, x]);
    }, [arr[0]]);
}

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

Reactjs相关问答推荐

尽管在CLI中收到来自Stripe的OK Post请求，但没有webhook Post请求的处理- NextJS 14

如何使用Reducer更新全局变量

Next.js-图像组件加载问题

值在返回页面时不更新，即使我已经更新了它们

无法在主组件的返回语句中呈现预期组件

带有样式的工具提示导致无法向功能组件提供参考警告

react -无法获取函数的最新参数值

为什么在页面重新加载时Location.State变得未定义？

React 在第一次渲染时为 null

Material-UI 和 React Hook 表单不记录值

.populate() 方法在 mongodb 中不起作用

提前输入错误：选项类型上不存在属性名称

无法设置 null 的属性(设置src)

Suspense/Await - 解析数据加载/保存到状态后无限循环

为嵌套路由配置一个不存在的 url 的重定向

Material UI v5.11 - Prop sx 在响应式中写了两次

如何将我的 ID 值传递给下一个组件？

需要帮助在 document.queryselector 的 nextjs 页面上插入 useEffect 状态

设置 Material UI 表格默认排序

在渲染不显示子元素之后，再次渲染时，子元素状态数据完全消失了.为什么会这样以及如何防止它发生？