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

当React中的条件满足时，当数据来自JSON数组时，如何显示/隐藏div？到目前为止，我已经得到了这段代码，但是当我将

isPassed={resultPass.pass}

的值更改为

isPassed={resultPass.failed}

时，结果仍然显示为

pass

我发现的最接近的示例是，但它不从JSON（我的代码中的var resultPass）获取值，而只是将真/假值分配给常量

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'));

var resultPass={
“通行证”：“通行证”，
“失败”：“失败”
}
已传递函数（道具）{
返回密码；
}
功能失败（道具）{
失败；
} 
功能结果显示（道具）{
const isPassed=props.isPassed；
如果（已通过）{
返回；
} 
返回；
}
//当resultPass.pass更改时，resultPass.fail仍显示为pass
render（，document.getElementById（'root'））；

这是我的。

这是因为

if（isPassed）{

总是计算为

true

。您应该像这样正确地检查if条件

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

if（isPassed==“passpass”）{
返回；
} 
返回；

您没有正确检查

ResultDisplay

的道具

  const isPassed = props.isPassed;
  if (isPassed) {
    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>;
} 

传递的函数（道具）{
返回密码；
}
功能失败（道具）{
返回失败；
} 

当我添加===“passpass”时，我得到了以下错误：“不变冲突失败（…）：渲染未返回任何内容。这通常意味着缺少返回语句。或者，若要不渲染任何内容，请返回null。”知道为什么吗？@Amma是的，因为您的

失败

函数没有

返回

语句。：）就是这样-现在可以了，谢谢！

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

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