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

Question

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

可运行代码沙箱

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处理程序中。