javascript - 使用 react-bootstrap 未显示模态

Question

我是 react 新手，这里我使用 react bootstrap 。

所以，我的组件就像

import React from 'react';
import { Button } from 'react-bootstrap';
import { Modal } from 'react-bootstrap';
import { Container, Row, Col, Image } from 'react-bootstrap';

class ErrorComponent extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            show: props.show,
        };
    }


    render() {



        return (
            <Modal
                {...this.props}
                bsSize="large"
                aria-labelledby="contained-modal-title-lg"
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-lg">
                            cndjcndcndncjcdcd
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                cdnjcdncdcnc
                 </Modal.Body>
                <Modal.Footer>
                </Modal.Footer>
            </Modal>
        );
    }
}



export default ErrorComponent;

这是从父组件渲染的，

 render() {
    let lgClose = () => this.setState({ showModal: false });
    return (
        <div>
            <div className="questionLevelIndication">
                <span className="levelIndicatorBtn backgroundColorForLow">
                    1
                </span>
                <label className="levelIndicationLabel">
                    Low Difficulty Level - Maximum 6 questions
                </label>
            </div>
            {(this.props.lowData) && this.props.lowData.Low.length > 0 && this.props.lowData.Low.map(data => (
                <LowRow technologies={this.state.technologies} onChange={this.onchange.bind(this)} data={data} key={data.id} onAddRow={this.onaddRow.bind(this)} onRemoveRow={this.onRemoveRow.bind(this)} />
            ))}
                <ErrorComponent show={this.state.showModal} onHide={lgClose} />
        </div>
    )
}

}

但是，我仍然看不到模型。这有什么不透明相关的问题吗？任何人都可以建议我解决这个问题吗？2.如何使该模态垂直居中？任何提示都会有所帮助。

标签： javascriptcssreactjsreact-bootstrap