时间戳

首页 > 解决方案 > 模态组件 - 如何包含和打开/关闭另一个组件

reactjs - 模态组件 - 如何包含和打开/关闭另一个组件

问题描述

我刚开始学习 React。我有一个模态组件（基本上是 react-bootstrap 的模态组件的包装器）。这个想法是有一个“反馈”模式，我可以在不同的地方包含它。这种方法不起作用，我不知道我不知道什么：/

下面是我的意思/我如何尝试显示我的模态组件的一个快速示例

import React, { Component } from 'react'
import Modal from 'react-bootstrap/Modal'
import Button from "components/button/button"

export class BaseModal extends Component {

    constructor(props) {
        super(props);
        this.state = { show: false };
    }

    toggleModal() {
        this.setState({ show: !this.state.show })
    }

    render() {
        if (!this.props.show) {
            return null;
        };
        return (
            <>
                <Modal show={this.state.show}>
                    <Modal.Header closeButton>
                        <Modal.Title>Modal heading</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={this.toggleModal}>
                            Close
                        </Button>
                        <Button variant="primary" onClick={this.toggleModal}>
                            Save Changes
                        </Button>
                    </Modal.Footer>
                </Modal>
            </>
        )
    }
}

像这样的简单页面 - 单击此按钮不会执行任何操作（React 开发工具在 vdom 中显示没有 BaseModal 节点）

import React, { Component } from 'react'
import Button from "components/button/button"
import BaseModal from "components/modals/baseModal"

export class ButtonDocs extends Component {
    render() {
        <Button value="Open Modal" onClick={BaseModal.toggleModal} />
    }
}

标签： reactjs

解决方案

你不能只导入 aComponent然后调用它的方法，因为你实际上并没有在任何地方渲染它。

您需要做的是渲染组件，然后如果您想从另一个组件控制一个组件的状态，您需要“提升状态”并将状态和所需的任何方法作为道具传递给模态组件。像这样的东西：

模态组件

import React, { Component } from 'react'
import Modal from 'react-bootstrap/Modal'
import Button from "components/button/button"

export class BaseModal extends Component {

    render() {
        if (!this.props.show) {
            return null;
        };
        return (
            <>
                <Modal show={this.state.show}>
                    <Modal.Header closeButton>
                        <Modal.Title>Modal heading</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={this.props.toggleModal}>
                            Close
                        </Button>
                        <Button variant="primary" onClick={this.props.toggleModal}>
                            Save Changes
                        </Button>
                    </Modal.Footer>
                </Modal>
            </>
        )
    }
}

按钮文档

import React, { Component } from 'react'
import Button from "components/button/button"
import BaseModal from "components/modals/baseModal"

export class ButtonDocs extends Component {

constructor(props) {
        super(props);
        this.state = { show: false };
    }

    toggleModal() {
        this.setState({ show: !this.state.show })
    }

    render() {
        <Button value="Open Modal" onClick={this.toggleModal} />
        <BaseModal show={this.state.show} toggleModal={this.toggleModal} />
    }
}

推荐阅读