အခြေအနေအလိုက် တင်ဆက်မှုကို တုံ့ပြန်ပါ။

ဥပမာ-

ဤအစိတ်အပိုင်းနှစ်ခုကို ကျွန်ုပ်တို့ အသုံးပြုပါမည်-

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')
);

ဥပမာ-

curly braces များကိုအသုံးပြုခြင်းဖြင့် JSX တွင် JavaScript အသုံးအနှုန်းများကို မြှုပ်နှံနိုင်သည်-

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အစိတ်အပိုင်း ကို ပြန်ပေးပါ ၊ သို့မဟုတ် ပါက အစိတ်အပိုင်းကို ပြန်ပေးပါ ။isGoaltrueMissedGoal

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

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