Javascript 自定义模式不显示react.js

我试图调用此模式，但没有出现。我试图将模态放入render（）中，但它也不起作用。我使用了inspect element工具，它显示了来自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;

从“React”导入React；
导入“/Modal.css”；
常量模态=道具=>(
{props.title}
{props.children}
{props.canCancel&（取消）}
{props.canConfirm&（Confirm）}
);
导出默认模式；

我试着在这里调用模态

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;

import React，{Component}来自'React'；
从“../components/Modal/Modal.js”导入模态；
导入“/Investments.css”；
类InvestmentsPage扩展组件{
render（）{
报税表（
模态内容

模态

克雷尔
);
}
}
出口违约投资；

---

你的方法是错误的。我猜你的模态隐藏在其他DOM元素下。对于模态、工具提示等，应使用ReactDOM.createPortal（）

在id='root'的现有div下的index.html中创建新的 id='modal'的div

在上面列出的模态组件中从“react dom”导入react dom 返回 ReactDOM.createPortal（这里是您的JSX，document.querySelector（'modal'））

---

你能提供一个JSFIDLE吗？你把它叫做哪里？你的按钮没有触发任何事件。它工作正常。检查链接：它应该工作，因为我正在学习教程，但是我的firefox和chrome没有显示模式