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

Question

我正在从 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>
  )
 }
}

菜单组件看起来像这样

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

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

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

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

Answer 1

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

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

因此，如果条件为false ，则不评估<MenuCanvas/> 。 这就是短路评估的工作方式：

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

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

Answer 2

我认为你误会了双方：

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