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

startMenuLogic（）函数（在componentDidMount中调用）是一个javascript函数，当前仅能找到正在渲染的画布

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

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

Answer 1

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

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

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

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

即使那样，正如一些评论所建议的那样，也不建议使用比较对象的方式，因为仅比较引用。因此，您的情况应该为this.state.gameState === "Menu"。

Answer 2

我认为您误会了双方：

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

在react中添加条件渲染后，组件为null

2 个答案: