ReactDOM.createPortal() 在函数中调用时呈现空元素

Question

我有一个简单的 React.js 应用程序，它试图通过回调在 Portal 中呈现内容，有人知道为什么它没有呈现任何内容吗？

Runnable CodeSandbox

import React from 'react'
import ReactDOM from 'react-dom'
import './App.css';

function App() {
  const showElement = React.useCallback(() => {
    const element = document.createElement('div');
    document.querySelector('body').appendChild(element)
    ReactDOM.createPortal(() => <div>TEST</div>, element)
  }, [])
  
  return (
    <div className="App">
      <button onClick={showElement}>Click to Render Portal</button>
    </div>
  );
}

export default App;

Answer 1

您没有在 App 组件的返回中返回创建的门户，因此它实际上并没有被渲染。

试试类似的东西：

function App() {
  const elementRef = useRef(document.createElement("div"));

  const showElement = React.useCallback(() => {
    document.querySelector("body").appendChild(elementRef.current);
  }, []);

  return (
    <div className="App">
      <button onClick={showElement}>Click to Render Portal</button>
      {ReactDOM.createPortal(<div>TEST</div>, elementRef.current)}
    </div>
  );
}

这会创建一个 React ref 来保存创建的 DOM 元素，使用组件 JSX 的返回来呈现门户，并将 DOMNode 附加到按钮的 onClick 处理程序中。