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

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

2 个答案: