最小化條件語句的代碼

Question

有什么辦法可以讓我最小化以下代碼-

    <div className="App">
      <Checkbox parameter={parameter1} setParameter={setParameter1}></Checkbox>

      { parameter1.country && parameter1.category ?
        <ShowData parameter1={parameter1}></ShowData>
        : ""
      }
      { parameter1.country && parameter1.category ?
        <Chart1></Chart1>
        : ""
      }
      { parameter1.country && parameter1.category ?
        <Chart2></Chart2>
        : ""
      }

    </div>

這里我已經提到了 3 次parameter1.country && parameter1.category 。 我只想寫一次。

Answer 1

 <div className="App"> <Checkbox parameter={parameter1} setParameter={setParameter1}></Checkbox> { parameter1.country && parameter1.category && <React.Fragment> <ShowData parameter1={parameter1}></ShowData> <Chart1></Chart1> <Chart2></Chart2> </React.Fragment> } </div>

根據您的代碼示例， parameter1.country && parameter1.category適用於所有條件，而是使用? 三元運算符，我想建議&&將減少代碼中的空字符串。

使用<React.Fragment>組合所有相似的組件。

Answer 2

<div className="App">
      <Checkbox parameter={parameter1} setParameter={setParameter1}></Checkbox>
      { 
        parameter1.country && parameter1.category &&
        <>
        <ShowData parameter1={parameter1}></ShowData>
        <Chart1></Chart1>
        <Chart2></Chart2>
        </>
      }
    </div>

Answer 3

您在代碼中應用了三次相同的條件。 在所有三個地方，如果出現錯誤情況，您將一無所獲。

我認為你可以通過下面的代碼來做到這一點 -

<div className="App">
  <Checkbox parameter={parameter1} setParameter={setParameter1}></Checkbox>
  { parameter1.country && parameter1.category ?
    <div>
     <ShowData parameter1={parameter1}></ShowData>
     <Chart1></Chart1>
     <Chart2></Chart2>
    </div>
    : ""
  }
</div>