在反应中添加条件渲染后组件为空答案

【问题标题】：Component is null after adding a conditional rendering in react在反应中添加条件渲染后组件为空
【发布时间】：2020-01-22 20:27:45
【问题描述】：

我正在从 App.js 渲染我唯一的组件，如下所示：

export default class App extends React.Component {

constructor(props) {
super(props);
this.state = {gameState: "Menu"};
}

render() {
  return (
    <div>
      {<MenuCanvas/> && this.state === {gameState: "Menu"}}
    </div>
  )
 }
}

Menu 组件看起来像这样

export default class MenuCanvas extends React.Component {

constructor(props) {
  super(props);
}

render() {

  return (
    <div>
      <canvas id="menu-canvas" width="800" height="800"></canvas>
    </div>
  )
}

componentDidUpdate() {
  startMenuLogic();
}
}

startMenuLogic() 函数，在 componentDidMount 中调用是一个 JavaScript 函数，目前只能找到正在渲染的画布

canvas = document.getElementById('menu-canvas');

问题是画布是空的，即使在componentDidMount中调用了该函数，奇怪的是画布不是空的，直到我在App.js中添加了带有状态的条件渲染。在此之前，我的 App.js simple 总是返回，一切都很好。可能是什么问题，我该如何解决？

【问题讨论】：

this.state === {gameState: "Menu"} 将返回 false，因为当您在 JS 中比较对象时，它们会比较内存分配空间，而不是您认为的相等性。你想要的是 this.state.gameState === "Menu"
没错，这永远不会是真的，因为您正在创建一个新对象，这意味着引用将不匹配。
我刚刚注意到并修复了它。下面的两个答案有助于解决问题。

标签： javascript reactjs

【解决方案1】：

您的条件渲染逻辑错误。条件应该在组件之前：

      {this.state === {gameState: "Menu"} && <MenuCanvas/>}

因此，如果条件是 false，则不会评估 <MenuCanvas/>。这就是short circuit evaluation 的工作方式：

true && expression 返回expression，false && expression 返回false。

即便如此，正如一些 cmets 已经建议的那样，不推荐您比较对象的方式，因为只比较引用。所以你的条件应该是this.state.gameState === "Menu"。

【讨论】：

【解决方案2】：

我认为你搞错了：

{this.state.gameState === "Menu" && <MenuCanvas/>}

【讨论】：