如何用reactjs实现一个模式

Question

我有一个模态，但不能识别它们的样式，这是怎么回事？ 为什么不能识别它们的样式？ 我需要导入一个其他的依赖性？

import React,{Component} from 'react'
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button';

class CustomModal extends Component{
    constructor(props) {
        super(props);
        this.state = {
            show: false
        };

        this.handleClose = this.handleClose.bind(this);
        this.handleShow = this.handleShow.bind(this);
    }

    handleClose (){
        this.setState({ show: false });
    };

    handleShow (){
        this.setState({ show: true });
    };

    render() {
        return(
            <div>
                <Button variant="primary" onClick={this.handleShow}>Update</Button>

                <Modal show={this.state.show} onHide={this.handleClose}>
                    <Modal.Header closeButton>
                        <Modal.Title>Update</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>...</Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={this.handleClose}>Close</Button>
                        <Button variant="primary">Save</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        );
    }
}
 export default CustomModal;

我在使用Button，但是我的按钮从来没有画过。

Answer 1

我只是改变了你导入的方式 Components 并开始工作。

将导入的内容改为

import { Modal, Button } from "react-bootstrap";

来自

import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button';

现场演示https:/codesandbox.iosreact-bootstrap-x0ix0?fontsize=14&hidenavigation=1&主题=dark。