我正在尝试输出逗号分隔链接列表,这是我的解决方案。
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>
);
}
});
我只是想知道是否有更好,更干净的方法来实现这个目标?
由于
答案 0 :(得分:57)
在Khan Academy,我们使用了一个名为intersperse
的助手:
/* 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, ", ");
答案 1 :(得分:49)
<强>简单地强>
{tags.map((tag, i) => <span key={i}>
{i > 0 && ", "}
<Tag tag={tag} />
</span>)}
在React 16中,它可以更简单地完成:
{tags.map((tag, i) => [
i > 0 && ", ",
<Tag key={i} tag={tag} />
])}
答案 2 :(得分:7)
或者只是将列表项写入无序列表并使用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>
);
}
});
CSS:
.list--tags {
padding-left: 0;
text-transform: capitalize;
}
.list--tags > li {
display: inline;
}
.list--tags > li:before {
content:',\0000a0'; /* Non-breaking space */
}
.list--tags > li:first-child:before {
content: normal;
}
答案 3 :(得分:1)
import React from 'react';
import { compact } from 'lodash';
// Whatever you want to separate your items with commas, space, border...
const Separator = () => { ... };
// Helpful component to wrap items that should be separated
const WithSeparators = ({ children, ...props }) => {
// _.compact will remove falsey values: useful when doing conditional rendering
const array = compact(React.Children.toArray(children));
return array.map((childrenItem, i) => (
<React.Fragment key={`${i}`}>
{i > 0 && <Separator {...props} />}
{childrenItem}
</React.Fragment>
));
};
const MyPage = () => (
<WithSeparators/>
<div>First</div>
{second && (<div>Maybe second</div>)}
{third && (<div>Maybe third</div>)}
<div>Fourth</div>
</WithSeparators>
);
答案 4 :(得分:0)
这是一个允许<span>
和<br>
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);
}
它也过滤掉了假数组元素。我用它来格式化地址,其中一些地址字段没有填写。
它使用片段来避免关于丢失密钥的警告。
答案 5 :(得分:0)
没有其他标记的解决方案
reduce
在这里是一种矫枉过正,使用的最佳功能是(技术上)
flatMap(或Ramda中的chain
)。不幸的是,JS没有提供(尚未)。
<p className="conceps inline list">
{flatMap((concept, i) =>
[concept, <span key={i} className="separator">•</span>]
, lesson.concepts).slice(-1)}
</p>
生成类似
的内容功能•功能类型•高阶功能•部分应用
P.S。
对于Ramda而言R.addIndex(R.chain)
而不是flatMap
以上。
答案 6 :(得分:0)
简单的一个:
{items.map((item, index) => (
<span key={item.id}>
{item.id}
{index < items.length - 1 && ', '}
</span>
))}
答案 7 :(得分:0)
最简单的方法
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>
)
}
答案 8 :(得分:0)
可以完成技巧的功能组件。受到@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} />}
/>
答案 9 :(得分:0)
要添加到上述最佳答案中,Ramda的intersperse。
要用逗号分隔一堆,您可以执行以下操作:
const makeLinks = (x: Result[]) =>
intersperse(<>,</>, map(makeLink, x))
简洁