当来自 JSON 的数据在 ReactJS 中满足 if/else 条件时如何 show/hide div？

Question

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

我找到的最接近的示例是 this，但它不会从 JSON（我的代码中的 var resultPass）获取值，而只是将 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()功能returns一些东西，否则将无法正常工作。

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

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

当来自 JSON 的数据在 ReactJS 中满足 if/else 条件时如何 show/hide div？

How to show/hide divs when a if/else condition is met in ReactJS from a data coming from JSON?

javascript

if-statement

prop

reactjs