ตอบสนองการแสดงผลแบบมีเงื่อนไข

ตัวอย่าง:

เราจะใช้สององค์ประกอบนี้:

function MissedGoal() {
  return <h1>MISSED!</h1>;
}

function MadeGoal() {
  return <h1>Goal!</h1>;
}

ตัวอย่าง:

ตอนนี้ เราจะสร้างส่วนประกอบอื่นที่เลือกส่วนประกอบที่จะแสดงผลตามเงื่อนไข:

function Goal(props) {
  const isGoal = props.isGoal;
  if (isGoal) {
    return <MadeGoal/>;
  }
  return <MissedGoal/>;
}

ReactDOM.render(
  <Goal isGoal={false} />,
  document.getElementById('root')
);

ตัวอย่าง:

ReactDOM.render(
  <Goal isGoal={true} />,
  document.getElementById('root')
);

ตัวอย่าง:

เราสามารถฝังนิพจน์ JavaScript ใน JSX โดยใช้วงเล็บปีกกา:

function Garage(props) {
  const cars = props.cars;
  return (
    <>
      <h1>Garage</h1>
      {cars.length > 0 &&
        <h2>
          You have {cars.length} cars in your garage.
        </h2>
      }
    </>
  );
}

const cars = ['Ford', 'BMW', 'Audi'];
ReactDOM.render(
  <Garage cars={cars} />,
  document.getElementById('root')
);

ตัวอย่าง:

const cars = [];
ReactDOM.render(
  <Garage cars={cars} />,
  document.getElementById('root')
);

condition ? true : false

ตัวอย่าง:

ส่งคืนMadeGoalส่วนประกอบ if isGoalis trueมิฉะนั้นให้ส่งคืนMissedGoalส่วนประกอบ:

function Goal(props) {
  const isGoal = props.isGoal;
  return (
    <>
      { isGoal ? <MadeGoal/> : <MissedGoal/> }
    </>
  );
}

ReactDOM.render(
  <Goal isGoal={false} />,
  document.getElementById('root')
);