React如何实现条件渲染？NFL每周赛程按需显示比赛日怎么实现

核心逻辑 #

你只需要基于当前周次weekNo配置对应渲染规则，给各个比赛日板块加上条件判断即可实现需求。 #

第一步：预先配置周次规则 #

先把固定的赛程规则定义为可调整的常量，后续修改规则无需改动渲染逻辑：

// 可根据实际NFL赛程规则调整数值，周次索引从0开始
const SATURDAY_GAME_WEEK = 14; // 唯一有周六比赛的周索引，对应第15周
const FINAL_WEEK = 17; // 最后一周索引，对应第18周，仅安排周日比赛

第二步：修改渲染代码 #

给每个比赛日板块外层加条件判断，满足规则才渲染对应内容，同时额外增加数组非空判断，避免没有比赛时还渲染空的日期标题：

return (
<div>
      {/* 周四板块：非最后一周且当天有比赛才渲染 */}
      {weekNo !== FINAL_WEEK && Thursday.length > 0 && (
        <>
          <h2>Thursday</h2>
          {Thursday.map((teams) => (
            <p key={teams.id /* 补充唯一key避免React警告 */}>
              Week {weekNo + 1} at {teams.schedule[weekNo].time}: {teams.nickname} vs. {teams.schedule[weekNo].opponent}
            </p>
          ))}
        </>
      )}

      {/* 周六板块：仅指定周且当天有比赛才渲染 */}
      {weekNo === SATURDAY_GAME_WEEK && Saturday.length > 0 && (
        <>
          <h2>Saturday</h2>
          {Saturday.map((teams) => (
            <p key={teams.id}>
              Week {weekNo + 1} at {teams.schedule[weekNo].time}: {teams.nickname} vs. {teams.schedule[weekNo].opponent}
            </p>
          ))}
        </>
      )}

      {/* 周日板块：所有周只要有比赛就渲染 */}
      {Sunday.length > 0 && (
        <>
          <h2>Sunday</h2>
          {Sunday.map((teams) => (
            <p key={teams.id}>
              Week {weekNo + 1} at {teams.schedule[weekNo].time}: {teams.nickname} vs. {teams.schedule[weekNo].opponent}
            </p>
          ))}
        </>
      )}
      
      {/* 周一板块：非最后一周且当天有比赛才渲染 */}
      {weekNo !== FINAL_WEEK && Monday.length > 0 && (
        <>
          <h2>Monday</h2>
          {Monday.map((teams) => (
            <p key={teams.id}>
              Week {weekNo + 1} at {teams.schedule[weekNo].time}: {teams.nickname} vs. {teams.schedule[weekNo].opponent}
            </p>
          ))}
        </>
      )}
    </div>
);
};

可选优化 #

你现有代码里四个比赛日的列表渲染逻辑完全重复，可以抽成公共函数进一步精简代码：

// 抽离公共渲染函数
const renderGameList = (teamList, dayName) => {
  if (teamList.length === 0) return null;
  return (
    <>
      <h2>{dayName}</h2>
      {teamList.map(teams => (
        <p key={teams.id}>
          Week {weekNo + 1} at {teams.schedule[weekNo].time}: {teams.nickname} vs. {teams.schedule[weekNo].opponent}
        </p>
      ))}
    </>
  )
}

// 渲染部分直接调用即可
return (
  <div>
    {weekNo !== FINAL_WEEK && renderGameList(Thursday, 'Thursday')}
    {weekNo === SATURDAY_GAME_WEEK && renderGameList(Saturday, 'Saturday')}
    {renderGameList(Sunday, 'Sunday')}
    {weekNo !== FINAL_WEEK && renderGameList(Monday, 'Monday')}
  </div>
)

内容的提问来源于stack exchange，提问作者John G.