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

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

尝试更像：

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 的 return 呈现门户，并在按钮的 [=] 中附加 DOMNode 12=]处理程序。

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

ReactDOM.createPortal() renders empty element when called in a function

javascript

reactjs

react-hooks

react-portal