按下 React Native 按钮来控制导入的类状态

Question

我不知道我的案例的确切标题，所以我会详细解释。

下面是我的弹出类。

export default class Popup extends Component{
constructor(props){
super(props);
this.state={
isshowing: true,
}
}
handleShow(){
this.setState({isshowing:true})
}

return(
<View style={{}}>
<TouchableOpacity
style={{}}
onPress={() => this.setState({isshowing:false})}
>
<Text>X</Text>
</TouchableOpacity>
</View>
);
}
}

我省略了不必要的东西，例如样式等。

我想通过状态控制弹出窗口类的可见性。

我可以制作关闭按钮，因为关闭按钮在弹出类内，但我想使外部按钮(在主类内)使此弹出窗口可见，因为我正在导入弹出类。

我该怎么做？

Answer 1

你可以从你调用的类中传递 props，<Popup>如下：

export default class Parent extends Component{
....
<Button
title={"Make Popup visible Button"}
onPress={()=>this.setState({isPopupVisible:true})
/>
<Popup isVisible={this.state.isPopupVisible} />
....
}

在 Popup 类中，您应该将父类传递的isVisible props分配给 Popup 类状态 -isshowing。

如果弹出窗口未使用任何状态(在许多情况下)，则应考虑使用 SFC(无状态功能组件)。它更容易维护。