自定義模態沒有出現 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下現有 div 下 id='root' 創建新 div id='modal';
2. 在上面列出的模態組件中，從 'react-dom' 導入 ReactDOM並返回ReactDOM.createPortal( your_JSX_here , document.querySelector('#modal'))