时间戳

首页 > 解决方案 > 如何有条件地在 React 中显示？

reactjs - 如何有条件地在 React 中显示？

问题描述

我正在开发一个应用程序来显示 NFL 每周的日程安排。下面的代码有效，但我如何有条件地渲染天数？例如，只有一周有周六的比赛。此外，上周只有周日比赛。

return (
<div>
      <h2>Thursday</h2>
      {Thursday.map((teams) => (
        <p>
          Week {weekNo + 1} at {teams.schedule[weekNo].time}: {teams.nickname}{" "}
          vs.
          {teams.schedule[weekNo].opponent}{" "}
        </p>
      ))}

      <h2>Saturday</h2>
      {Saturday.map((teams) => (
        <p>
          Week {weekNo + 1} at {teams.schedule[weekNo].time}: {teams.nickname}{" "}
          vs.
          {teams.schedule[weekNo].opponent}{" "}
        </p>
      ))}

      <h2>Sunday</h2>
      {Sunday.map((teams) => (
        <p>
          Week {weekNo + 1} at {teams.schedule[weekNo].time}: {teams.nickname}{" "}
          vs.
          {teams.schedule[weekNo].opponent}{" "}
        </p>
      ))}
      
      <h2>Monday</h2>
      {Monday.map((teams) => (
        <p>
          Week {weekNo + 1} at {teams.schedule[weekNo].time}: {teams.nickname}{" "}
          vs.
          {teams.schedule[weekNo].opponent}{" "}
        </p>
      ))}
    </div>
);
};

标签： reactjsconditional-statements

解决方案

在您的情况下，我将创建一个功能组件以防止代码重复（如果没有计划显示，此组件将返回 null，因此该组件不会呈现任何内容）

function DaySchedule({day, teams, weekNo}) {
  if (!teams.length) {
    return null;
  }

  return (
    <>
      <h2>{day}</h2>
      {teams.map(team => (
        <p>
          {`
            Week ${weekNo + 1} at ${team.schedule[weekNo].time}: 
            ${team.nickname} vs. {team.schedule[weekNo].opponent}
          `}
        </p>
      ))}
    </>
  );
}

然后你可以像这样使用组件：

return (
  <div>
    <DaySchedule day="Thursday" teams={Thursday} weekNo={weekNo}/>
    <DaySchedule day="Saturday" teams={Saturday} weekNo={weekNo}/>
    <DaySchedule day="Sunday" teams={Sunday} weekNo={weekNo}/>
    <DaySchedule day="Monday" teams={Monday} weekNo={weekNo}/>
  </div>
);

推荐阅读