reactjs - 在不卸载子组件的情况下切换 React 父组件
问题描述
我希望在不卸载包含的子类的情况下将父组件从更改<View />
为<SafeAreaView />
。
// App
<SafeView>
<MainNavigator />
</SafeView>
// SafeView component
class SafeView extends React.Component<Props> {
render() {
const { children, showSafeView } = this.props;
const Component = showSafeView ? SafeAreaView : View;
return (
<Component style={styles.view} key="test_component">
<View style={{ flex: 1 }} key="test_view">
{ children }
</View>
</Component>
);
}
}
const mapStateToProps = state => ({ showSafeView: state.navigation.safe });
export default connect(mapStateToProps)(SafeView);
观察到的行为是:
- “showSafeView 道具更新
- 父组件发生变化
- 子组件卸载
- 子组件挂载
您可以看到我正在使用props.children
,但我也尝试将子组件直接作为道具传递,结果相同:
<SafeView Child={MainNavigator} />
///
const { Child, showSafeView } = this.props;
const Component = showSafeView ? SafeAreaView : View;
return (
<Component style={styles.view} key="test_component">
<View style={{ flex: 1 }} key="test_view">
<Child key="test_child" />
</View>
</Component>
解决方案
推荐阅读
- excel - 如果 xlsx 文件有折叠的行,如何在 Perl 中从 xlsx 读取数据
- mysql - MySQL:SyntaxError:意外的标识符
- java - 错误 500 后角球衣
- javascript - 函数中带 Var 和不带 Var 的变量
- swift - 如何在考虑夏令时的情况下转换时区之间的时间?
- ngx-bootstrap - 按钮弹出框冗余显示行为是错误吗?
- python - 在Django中使用scrapy和scrapyd不进入def(解析)
- python - 从 Pandas 数据框中传递特殊字符
- c# - JetBrains Rider 不显示 C# WPF 异常
- scala - 这是一个按名称的函数参数吗?为什么通配符是可选的?