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

这是因为if (isPassed) {始终评估为true。你应该像这样检查if条件

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

Answer 2

您未正确检查const isPassed = props.isPassed; if (isPassed) { return <Passed />; } return <Failed />;的支柱。

isPassed

if将是字符串＆＃34; passpass＆＃34;或＆＃34; failfail＆＃34;，但由于您的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>; }函数返回一些内容，否则它将无法正常工作。

.vcf

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

2 个答案: