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

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

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

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>
            </>
        )
    }
}

import React，{Component}来自“React”
从“反应引导/模式”导入模式
从“组件/按钮/按钮”导入按钮
导出类BaseModel扩展组件{
建造师（道具）{
超级（道具）；
this.state={show:false}；
}
toggleModal（）{
this.setState（{show:！this.state.show}）
}
render（）{
如果（！this.props.show）{
返回null；
};
返回(
模态标题
呜呜，你正在以模态的方式阅读这篇文章！
接近
保存更改
)
}
}

类似这样的简单页面-单击此按钮不会执行任何操作（React-dev工具在vdom中不显示BaseModel节点）

import React，{Component}来自“React”
从“组件/按钮/按钮”导入按钮
从“组件/模态/基本模态”导入基本模态
导出类ButtonDocs扩展组件{
render（）{
}
}

您不能只导入一个

组件，然后对其调用一个方法，因为您实际上并没有在任何地方渲染它

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

模态分量

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}来自“React”
从“反应引导/模式”导入模式
从“组件/按钮/按钮”导入按钮
导出类BaseModel扩展组件{
render（）{
如果（！this.props.show）{
返回null；
};
返回(
模态标题
呜呜，你正在以模态的方式阅读这篇文章！
接近
保存更改
)
}
}

按钮文档

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} />
    }
}

import React，{Component}来自“React”
从“组件/按钮/按钮”导入按钮
从“组件/模态/基本模态”导入基本模态
导出类ButtonDocs扩展组件{
建造师（道具）{
超级（道具）；
this.state={show:false}；
}
toggleModal（）{
this.setState（{show:！this.state.show}）
}
render（）{
}
}
啊，没错。因此，
提升状态
实际上意味着子组件的状态由祖先组件操纵（并传递给/更新），方法是调用导致重新呈现导入子组件的祖先方法。我想这是有道理的——只是一种全新的思维方式！非常感谢。确切地听起来你已经掌握了窍门！
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} />
    }
}