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

Question

我正在开发一个显示 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>
);
};

Answer 1

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

将其提取到渲染函数中，return null 不需要时：

renderThursday = () => {
  if (!Thursday.length) return null

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

然后将它们堆叠在您的主return:

return (
  <div>
    {this.renderThursday()}
    {this.renderSaturday()}
    {this.renderSunday()}
    {this.renderMonday()}
  </div>
)

Answer 2

在你的情况下，我会创建一个功能组件来防止代码重复（如果没有要显示的时间表，该组件将 return 为 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>
);

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

How do I conditionally display in React?

conditional-statements

reactjs