无法读取未定义的属性（读取“_internalRoot”）

Question

我正在尝试根据 env 标志切换渲染方法。因为我是 React 的新手，需要帮助才能理解正确的方法。得到一个错误，

TypeError: Cannot read properties of undefined (reading '_internalRoot')

这是我的条件渲染代码：

import { StrictMode } from "react";
import { createRoot, hydrateRoot } from "react-dom/client";

import App from "./App";


const renderDom = () => {
  const container = document.getElementById("root");
  const renderType = process.env.SSR
    ? hydrateRoot(container).render
    : createRoot(container).render;
  renderType(
    <StrictMode>
      <App />
    </StrictMode>
  );
};

renderDom();

现场演示

Answer 1

你正在从对象中提取

render

方法，并且在这个过程中你正在失去它的上下文。

在How to access the correct `this` inside a callback

阅读更多相关信息

---

你需要使用

 const root = process.env.SSR
    ? hydrateRoot(container)
    : createRoot(container);

  root.render( ... );

更新demo.