React Native - 为 Modal 使用 Props答案

【问题标题】：React Native - Using Props for ModalReact Native - 为 Modal 使用 Props
【发布时间】：2021-06-09 10:35:04
【问题描述】：

我正在尝试在我的应用程序中使用 modal，但我想将其分成不同的类，例如 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>
            )}

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

【问题讨论】：

标签： javascript react-native react-props react-native-modal

【解决方案1】：

因为你有一个渲染方法，我假设你的 App.js 是一个 Class 组件。

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

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 时，所有接收该新值作为 prop 的组件都会正确更新

【讨论】：

【解决方案2】：

在 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>
)

【讨论】：