我有一系列链接,我需要在两列表中显示。所以我在render()中使用.map函数来提取链接数组,然后在该函数的return语句中创建行/列。问题是数组中的每个元素都在两列中重复。我只在短时间内与React合作,任何帮助都将受到赞赏。这是我的代码:
const allLinks = this.props.links.map((link, index) => {
return (
<tr key={index}>
<td className="links"><a href="#" onClick={this.handleClick}>{link}</a></td>
<td className="links"><a href="#" onClick={this.handleClick}>{link}</a></td>
</tr>
)
});
答案 0 :(得分:0)
首先需要创建数组的块以便从中转换
说["1", "2", "3", "4", "5", "6", "7"]
到[["1", "2"], ["3", "4"], ["5", "6"], ["7"]]
然后实现嵌套映射,如
const chunk = (arr, chunkSize) => {
var arrays = []
while (arr.length > 0) {
arrays.push(arr.splice(0, chunkSize));
}
return arrays;
}
class App extends React.Component {
render() {
const data = chunk(this.props.links, 2);
const allLinks = data.map((linkSet, index) => {
return (
<tr key={index}>
{linkSet.map(link => {
return <td className="links"><a href="#" onClick={this.handleClick}>{link}</a></td>
})}
</tr>
)
});
}
}