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

Question

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

我找到的最接近的示例是this，但它不会从 JSON 中获取值（我的代码中为 var resultPass），而只是将 true/false 值分配给 const。

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的prop。

  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>;
}