Question

我有一系列链接，我需要在两列表中显示。所以我在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>
   )
 });

Answer 1

首先需要创建数组的块以便从中转换说["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>
       )
     });
    }
}

React中data.map的问题

1 个答案: