Question

我正在尝试处理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;

我要去哪里错了？

Answer 1

我认为createPortal的第一个参数期望使用React元素，而不是React Component。

在ProcessingModal.js中，将ModalContent包装到JSX元素中：

   return ReactDOM.createPortal(<ModalContent/>, document.querySelector("#modal"))

Answer 2

样式是我的问题。模态样式显示：无；一旦将其删除，它就会起作用。

React 16-无法使用createPortal进行模式渲染

2 个答案: