0

我试图在我的应用程序上使用模态，但我想分成不同的类，如 App.js 和 /components/modal。我遇到的问题是我无法正确传递道具。这是我的代码。

我导入了模态。

import InfoModal from '../components/InfoModal';

我创造了状态。

state = {modalVisible: false}

印刷机上的可见功能。

    setModalVisible = (visible) => {
        
        this.setState({ modalVisible: visible });
    }

调用组件。

render() {

const { modalVisible } = this.state;  

return ( 

<InfoModal visible= {modalVisible} />    

<TouchableOpacity onPress={() => this.setModalVisible(true)} ><Text style={styles.infoButton}>Info</Text></TouchableOpacity>
            )}

我不明白我应该设置什么道具以及如何正常工作。

4

2 回答 2

0

在 Modal 组件中使用状态和方法，并使用模态引用切换它。

放

const { modalVisible } = this.state;

和

setModalVisible = (visible) => {
        
        this.setState({ modalVisible: visible });
    }

在 InfoModal.js 中

然后像这样使用它

   render() {
    return ( 
        <InfoModal ref={(c)= this.infoModal=c }visible= {modalVisible} />  
        <TouchableOpacity onPress={() => this.infoModal.setModalVisible(true)} ><Text style={styles.infoButton}>Info</Text></TouchableOpacity>
)
于 2021-06-09T10:44:43.263 回答
0

由于您有一个渲染方法，我假设您的 App.js 是一个类组件。

您可以像这样在构造函数上创建一个状态

class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            modalVisible: false,
        }
    }

// rest of the class
}

您更改模态可见性的功能应该是这样的

setModalVisible = (visible) => {
    this.setState({modalVisible: visible});
}

这就是您控制 App 类状态的方式。

对于您的模态，您App.state.modalVisible作为道具传递。

<InfoModal visible={this.state.modalVisible} />

当您使用 setState 时，接收该新值作为道具的所有组件都将正确更新

于 2021-06-09T12:59:16.313 回答