如何在来自JSON的数据中在ReactJS中满足if / else条件时显示/隐藏div？

Question

当数据来自JSON数组时，如何在React中满足条件时显示/隐藏div？到目前为止我已经有了这个代码，但是当我将isPassed={resultPass.pass}的值更改为isPassed={resultPass.failed}时，它仍然显示结果为pass。

我发现的最接近的例子是this，但它不从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

你没有正确检查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>;
} 

Answer 2

那是因为if (isPassed) {总是评价true。您应该像这样正确检查if条件

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