typescript 我无法在react-dom/client中使用createRoot函数

hsvhsicv 于 2022-11-18 发布在 TypeScript

关注(0)|答案(4)|浏览(447)

import React from 'react';
import * as ReactDOMClient from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const rootElement = document.getElementById("root");
// This opts into the new behavior!
ReactDOMClient.createRoot(rootElement as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

如果执行此代码，则会发生如下错误。
未能找到模块“react-dom/client”的声明文件。“E：/Workspace/React/welcomedev-react-starter/node_modules/react-dom/client.js”隐式具有“any”类型。如果npm i --save-dev @types/react-dom存在，请尝试该文件，或者添加包含declare module 'react-dom/client'; 1的新声明（.d.ts）文件|从“react”导入React;
2个|从“react-dom/客户端”中导入 * 作为ReactDOMClient;|第三章|从'./App'导入应用程序;4|从'./reportWebVitals'导入报告网络生命体征;
我想知道答案。

typescript

来源：https://stackoverflow.com/questions/71836313/i-cant-use-createroot-function-in-react-dom-client

4条答案

按热度按时间

vx6bjr1n1#

请确保安装了正确的类型版本。请尝试运行：
npm install --save-dev @types/react@18 @types/react-dom@18
不要依赖IDE来正确地选择所有内容。在我的例子中，我必须手动输入import并使用createRoot，如下所示：

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root')!);   // notice the '!'
root.render(<App />);

请注意您需要如何使用感叹号（'！'）告诉typescript您确信根不会为空。

赞(0）回复(0）举报 2022-11-18

kyvafyod2#

我从www.example.com得到这个例子https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

你试过createRoot(container!)吗？

赞(0）回复(0）举报 2022-11-18

mrwjdhj33#

如果您正在使用带有react的typescript，那么您需要导入支持类型并满足其他typescript条件的相对依赖项。
如果你正在处理不支持typescript的依赖项，你可以使用这个方法。希望这能有所帮助。
Typescript. What to do if module doesn't have @types?

赞(0）回复(0）举报 2022-11-18

gwo2fgha4#

在createRoot()之前使用ReactDOM可以解决此问题。例如-