我如何有條件地加載我的React組件？

Question

如何在狀態更改時有條件地加載React工具欄組件？

constructor(props) {
        super(props);
        this.state = {
            currentpagenum: 0,
        };
    }

render(){
   return(
       <View>
           {this.state.currentpagenum!==0 ? this.getToolbar(): null;}
       </View>
    );
}

getToolbar(){
      return(
            <ToolbarAndroid />
      );
 }

Answer 1

好像您添加了一個錯字錯誤; 在null之后，這也是不必要的，您也可以擺脫getToolbar function而嘗試：

constructor(props) {
  super(props);
  this.state = {
      currentpagenum: 0,
  };
}

render() {
  return(
      <View>
          {this.state.currentpagenum !== 0 ? <ToolbarAndroid /> : null}
      </View>
   );
}

Answer 2

有條件地渲染內容的另一種方法是：

render() {
  return(
      <View>
          {this.state.currentpagenum !== 0 && <ToolbarAndroid />}
      </View>
   );
}

當然，由於javascript中“真實性”的工作原理，這意味着您可以進一步簡化以下內容：

render() {
  return(
      <View>
          {this.state.currentpagenum && <ToolbarAndroid />}
      </View>
   );
}