React createProtal 调用外部 JSX 组件不更新 DOM答案

【问题标题】：React createProtal called outsite a JSX component not updating the DOMReact createProtal 调用外部 JSX 组件不更新 DOM
【发布时间】：2023-02-06 18:39:25
【问题描述】：

我正在尝试使用 createProtal 在 React 应用程序中呈现动态生成的 React 组件。当我从一个类中调用 createProtal 时，该组件未呈现。

Handler.ts包含业务逻辑的类

export class Handler {
  private element: HTMLElement | null;

  constructor(selector: string) {
      this.element = document.getElementById(selector);
  }

  attachedEvent() {
      this.element?.addEventListener("mouseenter", () => {
          let cancel = setTimeout(() => {
              if (this.element != null)
                  this.attachUi(this.element)
          }, 1000)

          this.element?.addEventListener('mouseleave', () => {
              clearTimeout(cancel)
          })
      })
  }

  attachUi(domNode: HTMLElement) {
      createPortal(createElement(
          'h1',
          {className: 'greeting'},
          'Hello'
      ), domNode);
  }
}

Main.tsx使用Handler.ts的react组件

const handler = new Handler("test_comp");
export default function Main() {

  useEffect(() => {
      // @ts-ignore
      handler.useAddEventListeners();
  });
  return (
      <>
        <div id="test_comp">
          <p>Detect Mouse</p>
        </div>
      </>
  )
 }

但是，当我将 attachUi 函数替换为下面的函数时，它就起作用了

 attachUi(domNode: HTMLElement) {
    const root = createRoot(domNode);
    root.render(createElement(
        'h1',
        {className: 'greeting'},
        'Hello'
    ));
  }

我错过了什么？

【问题讨论】：

标签： reactjs react-tsx

【解决方案1】：

React 使用一种叫做虚拟 DOM 的东西。只有包含在该 VDOM 中的组件才会显示在屏幕上。一个组件返回一些 React 理解并包含到 VDOM 的东西。

createPortal(...) 返回与 <SomeComponent ... /> 完全相同的结果

因此，如果您只是这样做：const something = <SomeComponent /> 并且您不在任何地方使用该变量，则无法显示它。 createPortal也是如此。 const something = createPortal(...)。如果您想显示它，只需在某处使用该变量即可。将它添加到 VDOM，让你的一些组件返回它。

你的结构是

App
 -children
   -grand children
 -children2

而您的门户在其他地方，没有附加到那个 VDOM。如果要显示，则必须将其包含在那里。

在下一个使用 root.render 的示例中，您将创建新的 VDOM。它与您的主要设备分开。这就是它显示的原因

【讨论】：