碎片中的门户？

Question

是否可以在 <React.Fragment> 中将 ReactDOM.createPortal 与另一个渲染到组件渲染位置的元素一起使用，或者我在这里做错了什么？

class Component extends React.Component{
    render(){
        return (
            <React.Fragment>
                ReactDOM.createPortal(<h1>Hello</h1>, 
                                      document.getElementById('side'))
                <h1>Hello</h1>
            </React.Fragment>
        );
    }
}

Answer 1

是的，这完全有可能，您只需要将 React.createPortal 包裹在 {} 中，例如

class Component extends React.Component{
    render(){
        return (
            <React.Fragment>
                {ReactDOM.createPortal(<h1>Hello</h1>, 
                                      document.getElementById('side'))}
                <h1>Hello</h1>
            </React.Fragment>
        );
    }
}

Working codesandbox

碎片中的门户？

Portal inside Fragments?

reactjs

react-component