Question

不久，我的代码导入了一个 txt 文件（通过 Webpack 插件），每行由一个特殊字符分割，以便可供数组使用。然后“Fixture”从数组中调用一个值（例如 fixture = array[i] 时 i = 1）。然后我在子字符串函数中使用该数据来获取我需要的数据。如果 fixture = array[1]，它将返回例如布伦特福德为 homeTeam 和阿森纳为 awayTeam。一些数据是homeTeam和awayTeam，

所以，回到我的 React 组件，我需要重新渲染我的组件至少 10 次，但在 i 上使用不同的值（前面提到的变量为 array[i]）。

截至目前，我的主组件的 return() 语句返回一个子组件：

<Match hometeam={homeTeam} awayteam={awayTeam}/>

将 homeTeam 和 awayTeam 属性发送到子组件。

我需要每次使用不同的值运行 <Match/> X 次。我该怎么做？希望你能帮我...

Answer 1

您通常通过使用 map() 为每个项目渲染一个组件来实现这一点。要对两个数组的每个组合执行此操作，只需将一个 map() 嵌套在另一个数组中。

例如：

<div>
  {homeTeams.map(homeTeam => (
    awayTeams.map(awayTeam => (
      <Match homeTeam={homeTeam} awayTeam={awayTeam} />
    )
  )}
</div>

请注意，您通常不需要知道索引来执行此操作，您只需遍历数组中的每个项目并用它渲染一些内容。

Answer 2

如果您想将 array 映射到 <Match/> 的列表

<div>
   {array.map(fixture => {
       let { homeTeam, awayTeam } = yourSubstringMethod(fixture);
       return (
           <Match homeTeam={homeTeam} awayTeam={awayTeam} />
       );
   })}
</div>

如果您想映射部分 array，请将 array.map 替换为 array.slice(0, 10).map

重新渲染 React 组件 X 次？

2 个答案: