自定义模式不会出现react.js

Question

我正在尝试将此模式称为，但没有出现。我试图将Modal放到render（）中，但是它也不起作用。我使用了检查元素工具，它显示了Modal的div，但显示为“灰色”。

这是模态

import React from 'react';
import './Modal.css';
const modal = props =>(
    <div className="modal">
        <header className="modal__header">
        <h1>{props.title}</h1>
        </header>
        <section className="modal__content">
        {props.children}
        </section>  
        <section className="modal__actions">
            {props.canCancel && (<button className="btn" onClick={props.onCancel}>Cancel</button>)}
            {props.canConfirm &&(<button className="btn" onClick={props.onConfirm}>Confirm</button>)}
        </section>
    </div>
);
export default modal;

并且我想在这里称呼莫代尔

import React,{Component} from 'react';
import Modal from '../components/Modal/Modal.js';

import './Investments.css';

class InvestmentsPage extends Component{
    render(){
        return(            
        <React.Fragment>
            <Modal>
                <p>Modal content</p>
            </Modal>
            <div className="investment-control">
                <p>Modal</p>
                <button className="btn btnt1" >Crear </button>
            </div>
        </React.Fragment>);
    }
}

export default InvestmentsPage;

Answer 1

您的方法是错误的。我猜这里您的模态隐藏在其他DOM元素下。您应该将ReactDOM.createPortal（）用于模式，工具提示等。：

1. 在index.html中，在具有id ='root'的现有div下，创建新div，其中id ='modal';
2. 在上面列出的模态组件中从'react-dom'导入ReactDOM] >>然后返回ReactDOM.createPortal（在您的JSX_here，document.querySelector（'＃modal'））