我正在尝试处理POST时呈现加载通知模式。使用createPortal看起来应该非常简单，但是模态永远不会显示。
我在索引中添加了一个div，其ID为modal：
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<div id="modal"></div>
</body>
这里是反应成分。单击测试按钮时，showModal的状态设置为true：
import React, { Component, Header } from 'react';
import { render } from "react-dom";
import { Row, Col, Button } from 'reactstrap'
import 'bootstrap/dist/css/bootstrap.css';
import ProcessingModal from '../Modals/ProcessingModal';
export class TestModal extends React.Component {
constructor(props) {
this.state = {
showModal: false,
}
this.handleShowModal = this.handleShowModal.bind(this);
}
handleShowModal() {
this.setState({ showModal: true });
}
render() {
return (
<div>
<div className='container-fluid'>
<h2 style={{ textAlign: 'center', border: 'none' }}>
Header Text
</h2>
<br />
{this.state.showModal ? <ProcessingModal /> : null }
<Row>
<Col md={6}>
<Button onClick={this.handleShowModal} type="button">test</Button>
</Col>
</Row>
</div>
</div>
);
}
这是ProcessingModal js：
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
const ModalContent = (
<div className='modal text-center'>
<div className="spinner-border text-success"><br />
Loading...
</div>
</div>
);
function ProcessingModal(props) {
return ReactDOM.createPortal(ModalContent, document.querySelector("#modal"));
}
export default ProcessingModal;
我要去哪里错了？
我认为createPortal的第一个参数应该使用React元素，而不是React Component。
在ProcessingModal.js中，将ModalContent包装到JSX元素中：
return ReactDOM.createPortal(<ModalContent/>, document.querySelector("#modal"))
样式是我的问题。模态样式显示：无；一旦删除，它就可以工作。