时间戳

首页 > 解决方案 > 重新渲染 React 组件 X 次？

javascript - 重新渲染 React 组件 X 次？

问题描述

很快，我的代码导入了一个 txt 文件（通过 Webpack 插件），用一个特殊字符分割每一行，以供 Array 使用。然后“夹具”从数组中调用一个值（例如fixture = array[i]when i = 1）。然后我在子字符串函数中使用该数据来获取我需要的数据。如果fixture = array[1]，它将返回例如 Brentford ashomeTeam和阿森纳 as awayTeam。一些数据是homeTeam和awayTeam,

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

截至目前，我return()的主要组件的 -statement 返回一个子组件：

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

它将homeTeam和awayTeam道具发送到子组件。

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

标签： javascriptarraysreactjstypescriptfor-loop

解决方案

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

例如：

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

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

推荐阅读