我在Reaction中创建了如下所示的函数. 我通常通过array.map进行渲染,但我以不同的方式进行了测试.

export async function layerCreate(id) {
    const layerArea = document.getElementById("layerArea");

    const layer = document.createElement("div");
    layer.classList.add("layer");

    await layerArea.append(layer);

    const root = await createRoot(layer);
    await root.render(<Layer id={id}/>);
}

此函数将一个新的react 元素附加到一个名为layerArea的空div.LayerArea使用useContext用一个名为GlobalProvider的值进行包装.

<GlobalProvider>
    <div id="layerArea" className="layerArea"></div>;
</GlobalProvider>

当使用上面的函数在layerArea下添加一个Layer元素时,我try 通过Layer元素中的useContext调用GlobalProvider值.但其价值却是未定义的.

我想知道为什么不能通过createRoot在Provider子元素中创建的Reaction元素中使用Provider的值.

推荐答案

因此,使用另一个"根元素"(使用createRoot)不允许从主应用程序访问您的提供者的原因是,React将新的"根元素"视为Reaction的不同初始化(他们有时将其称为"根光纤 node ").

这实际上就像在页面中运行Reaction应用程序(很像您可以同时初始化几个相同或类似的Reaction小部件).

一旦注册了Root Node并将其附加到DOM,react 代码就会呈现带有所有相关react 代码的组件(在您的例子中,这就是Layer中的所有内容以及随后呈现"underneath"的所有内容)

Note: "underneath"元素树(又名UI Tree)

React18和老版本的流程不同,放弃了"Concurrent Mode",但开发人员的体验和最终结果基本相同

createRoot(从Docs开始)有一些注意事项

注意事项

  • 如果您的应用程序是服务器渲染的,则不支持使用createRoot().请改用hydrateRoot().
  • 你的应用程序中可能只有一次createRoot呼叫.如果你用一个框架,它可能会为你做这个调用.
  • 如果希望在DOM树的不同部分呈现一段JSX,而该部分不是组件的子级(例如,模式或工具提示),请使用createPortal而不是createRoot.

Reactjs相关问答推荐

我的组件在jsx文件中继续重新渲染

从另一个组件更改组件中const的状态

react 路由导航不工作,但手动路由工作

为什么Next.js 14无法解析页面路由路径?

Npm运行构建`在Next.js 14中不起作用

将动态元素中的输入数据传输到Reaction

如何使数据库数据在第一次呈现时显示?

在React Create App TS项目中安装material UI

在 React 中将 MUI 样式外包到单独的文件中?

useRef 不关注模态

从ReactDataGridtry 将数据传递给父组件

React Router 6 点击链接在 React 18 应用中打开 flickr 页面

无法设置 null 的属性(设置src)

如何到达类组件中的状态?

损坏的图像 React useState

我收到Uncaught TypeError: props.handleSelect is not a function

Reactjs 表单未反映提交时的更改

使用 React.UseEffect 从 api 获取但我的清理返回不起作用

是什么导致了这个令人惊讶的数组导致 React

当父组件重新渲染时做出react ,我失go 了子状态.我错过了什么?