在反應中添加條件渲染后組件為空

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/>}