Question

下面的代码使状态索引更改后组件也将卸载

 <View style={{flex:1}}>
                  <TabScreens navigationState={this.state.index} onChangeTab={this.onChangeTab}>
                          {index==0&&<One/>}
                          {index==1&&<Two/>}
                          {index==3&&<Three/>}
                  </TabScreens>
  </View>

下面的代码只是隐藏具有显示属性none的组件

<View style={{flex:1}}>
                  <TabScreens navigationState={this.state} onChangeTab={this.onChangeTab}>
                          <One style={index==0?{display:'flex'}:{display:'none'}}/>
                          <Two style={index==1?{display:'flex'}:{display:'none'}}/>
                          <Three  style={index==2?{display:'flex'}:{display:'none'}}/>
                  </TabScreens>
</View>

第二个可以工作，但是我如何实现这个反应逻辑，有可能为此编写逻辑

我也尝试过

React.Children.toArray(this.props.children)[0]/*index*/

或

React.Children.map(this.props.children,(cmp,iteration)=>{
    if(iteration==this.props.navigationState){
      return cmp;
}
})

请帮助我

Answer 1

秒使工作正常，但我如何才能实现这种反应逻辑为此编写逻辑

display: none是隐藏组件但保持安装状态的方式。如果您尝试做更复杂的事情，则可能要参考conditional rendering的文档。

您可以编写一个返回所需html的函数。 Here is an example模态教程，有条件地显示display: none。

您的问题对我来说不是很清楚，但是下面是一个示例，说明如何使用条件渲染的文档在渲染功能之外使用逻辑来实现此目的。

const OpenTab = (props: {
  index: number;
}) => {
  switch(props.index)
    case 1:
    return (
      <>
      //.... whatever you want the code to look like
      </>
    );
    case 2:
    //.... more logic
  //....
};

然后您放

              <TabScreens navigationState={this.state} onChangeTab={this.onChangeTab}>
                <OpenTab index={index} />
              </TabScreens>

如何在防御组件之间切换时保持React组件的安装状态

1 个答案: