无法从另一个组件打开模态组件

Question

我正在尝试从另一个组件（扩展 React.PureComponent）React.PureComponent 打开模式（扩展组件）。

我是新来的反应和 javascript 所以也许我的问题已经通过混合这些组件类型？

老实说，我在 TSX 文件中使用一个组件，在 JS 文件中使用另一个组件。

也许这太麻烦了？

底线是使用此代码后：

Modal.js 中的第一个组件：

import React, {Component} from 'react'
import {Modal, Button, Row, Col, Form} from 'react-bootstrap';


export class AddModal extends Component {
    constructor(props) {
        super(props);
    }

    render(){
        return(
            <Modal
                {...this.props}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Modal heading
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h4>Centered Modal</h4>
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
                        dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
                        consectetur ac, vestibulum at eros.
                    </p>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

第二个组件部分相关代码

import React from 'react';
import './App.scss';
import {createApiClient, Ticket} from './api';
import {AddModal} from './Modal'
import {Button} from 'react-bootstrap';

export type AppState = {
    tickets?: Ticket[],
    search: string,
    hidden: number,
    show: boolean,
    see_more : boolean[],
    addModalShow : boolean
}

const api = createApiClient();

export class App extends React.PureComponent<{}, AppState> {
    state: AppState = {
        tickets: [],
        search: '',
        hidden : 0,
        show : false,
        see_more : [],
        addModalShow : false
    };

addModalClose = () => {
        this.setState( {
            addModalShow : false
        });
    }

    addModalOpen = () => {
        this.setState( {
            addModalShow : true
        });
    }

<Button id="button" className="add_ticket" onClick={this.addModalOpen}>New Ticket</Button>
                <AddModal
                show={this.state.addModalShow}
                onHIde={this.addModalClose}
                />

按下按钮后我得到的是：它实际上是在第一个组件之上。

知道这里有什么问题吗？

Answer 1

这是因为您的引导程序 CSS 样式不起作用！！！

首先，您需要使用 NPM 安装引导程序

npm install --save bootstrap

现在在您的项目中的任何地方导入引导程序（推荐在最顶层的组件中） ，这适用于我的情况。

import 'bootstrap/dist/css/bootstrap.css';

CSS 样式将开始工作。 :)

快乐编码！