可能无法从另一个组件打开模式组件

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安装Bootstrap

npm install --save bootstrap

现在可以在项目中的任何地方导入导入引导程序（建议在最上面的组件中使用），在我的情况下可以使用。

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

CSS样式将开始工作。 :)

快乐编码！