如何在來自JSON的數據中在ReactJS中滿足if / else條件時顯示/隱藏div？

Question

當數據來自JSON數組時，如何在React中滿足條件時顯示/隱藏div？ 到目前為止我已經有了這個代碼，但是當我將isPassed={resultPass.pass}的值更改為isPassed={resultPass.failed}它仍然將結果顯示為pass 。

我發現的最接近的例子就是這個 ，但是它沒有從JSON（我的代碼中的var resultPass）獲取值，而只是為const賦予true / false值。

var resultPass = {
  "pass": "passpass",
  "fail": "failfail"
}

function Passed(props) {
  return <div class="result-pass"><h3>passpass</h3></div>;
}

function Failed(props) {
  <div class="result-fail"><h3>failfail</h3></div>;
} 

function ResultDisplay(props) {
  const isPassed = props.isPassed;
  if (isPassed) {
    return <Passed />;
  } 
  return <Failed />;
}

// When resultPass.pass is changed resultPass.fail it still shows as pass
render(<ResultDisplay isPassed={resultPass.pass} />, document.getElementById('root'));

這是我的Codesandbox 。

Answer 1

那是因為if (isPassed) {總是評估為true 。 您應該像這樣正確檢查if條件

if (isPassed === "passpass") {
    return <Passed />;
  } 
  return <Failed />;

Answer 2

您沒有正確檢查ResultDisplay的支柱。

  const isPassed = props.isPassed;
  if (isPassed) {
    return <Passed />;
  } 
  return <Failed />;

isPassed將是字符串“passpass”或“failfail”，但由於您的if語句正在進行基本等效檢查，因此將兩個字符串轉換為true布爾值。 因此，您的if語句始終計算為true並且您始終返回<Passed /> 。

檢查字符串等效性的正確方法是使用更嚴格的標識運算符（ === ），它不會轉換類型並確保您檢查完全相同的字符串。

  const isPassed = props.isPassed;
  if (isPassed === "passpass") {
    return <Passed />;
  } 
  return <Failed />;

您還需要確保您的Failed()函數返回一些內容，否則它將無法正常工作。

function Passed(props) {
  return <div class="result-pass"><h3>passpass</h3></div>;
}

function Failed(props) {
  return <div class="result-fail"><h3>failfail</h3></div>;
}