我如何有条件地加载我的 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>
   );
}

当然，由于 'truthiness' 在 javascript 中的工作方式，这意味着您可以进一步缩短为：

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

我如何有条件地加载我的 React 组件？

How do i load my React component conditionally?

javascript

conditional

components

reactjs