使用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.如何使模态垂直居中？ 任何提示都会有所帮助。