[英]React native: rendering conditional component based on state value change in Modal
我需要在 react native Modal中显示类似选项卡的行为
我首先创建了一个状态变量selectedSub ,它用值'from'初始化
现在我的模态有 2 个TouchableHighlight如下
_availabiltyModal() {
return (
<TouchableHighlight
onPress={() => { this.setState({ selectedSub: 'from' }) }}
activeOpacity={0.9}
style={[styles.tab, this.state.selectedSub == 'from' && styles.active]}>
<RkText rkType="header" style={this.state.selectedSub == 'from' && styles.activeText}>From</RkText>
</TouchableHighlight>
<TouchableHighlight
onPress={() => { this.setState({ selectedSub: 'to' }) }}
activeOpacity={0.9}
style={[styles.tab, this.state.selectedSub == 'to' && styles.active]}>
<RkText rkType="header" style={this.state.selectedSub == 'to' && styles.activeText}>To</RkText>
</TouchableHighlight>
{this._renderPicker()}
)}
这两个负责根据需要更改状态参数selectedSub 。
基于这个状态参数,我有条件地展示了我制作和导入的另一个组件,如下所示
_renderPicker() {
if (this.state.selectedSub == 'from') {
return <TimePicker screenProps={{ time: this.state.selectedAvailabilty.from }} />
} else {
return <TimePicker screenProps={{ time: this.state.selectedAvailabilty.to }} />
}
}
我在 TouchableHighlight 下方的 Modal 中调用了这个函数
现在根据 RN 文档,当使用this.setState()方法更新状态变量时,组件应该重新渲染。 其他一切工作正常( TouchableHighlight 样式改变)并且状态的更新也反映在控制台中。 但是_renderPicker
函数不会返回更改后的视图,并且始终停留在之前_renderPicker
的父级初始化时设置的视图上。
有人可以帮我指出我可能一直忽略的问题。 顺便提一下,所有这些调用实际上都是在主render()
方法之外直接进行的。 这可能是一个可能的问题
------更新------ 这里是完整的参考
render() {
return({this._availabiltyModal()}
<View style={appStyles.tagsWrapper}>
{this.state.week.map((day, i) => {
return (
<TouchableHighlight
key={i}
activeOpacity={0.9}
style={[appStyle.mr10, appStyle.mb10]}
onPress={() => {
this.setModalVisible(true, day);
}}>
<Text style={appStyle.tag}>{day}</Text>
</TouchableHighlight>
)
})}
</View>
)
}
将 _renderPicker 方法移动到 render() 方法中,例如...
render() {
...
{this._renderPicker()}
...
}
从react-native看MODAL组件的代码
render(): React.Node {
....
const innerChildren = __DEV__ ? (
<AppContainer rootTag={this.context.rootTag}>
{this.props.children}
</AppContainer>
) : (
this.props.children
);
return (
<RCTModalHostView
....>
<View style={[styles.container, containerStyles]}>
{innerChildren}
</View>
</RCTModalHostView>
);
}
您正在更改的状态是使用模态组件的组件,该组件通过上层函数呈现其子项......重新渲染,直到应用强制重新渲染。
这是一篇有用的文章,进一步解释了这个功能是如何起作用的, 强制重新渲染子组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.