javascript React - 三元运算符或jsx中的条件包含带反应的html

Posted 2021-05-03

// in jsx

class NumberPicker extends React.Component {
  render() {
    const num = getNum();
    return (
      <div>
        <h1>Your number is {num}</h1>
        <p>{num === 7 ? "Congrats!" : "Unlucky!"}</p>
        {num === 7 && (
          <img src="https://i.giphy.com/media/nXxOjZrbnbRxS/giphy.webp" />
        )}
      </div>
    );
  }
}

// conditional 
class NumberPicker extends React.Component {
  render() {
    const num = getNum();

    let msg;
    if (num === 7) {
      msg = (
        <div>
          <h2>CONGRATS YOU WIN!</h2>
          <img src="https://i.giphy.com/media/nXxOjZrbnbRxS/giphy.webp" />
        </div>
      );
    } else {
      msg = <p>Sorry You Lose!</p>;
    }

    return (
      <div>
        <h1>Your number is {num}</h1>
        {msg}
      </div>
    );
  }
}