升级到react@18和react 18失败

Question

我有一个现有的Reactive17应用程序，作为一个创建-反应-应用程序输出与TypeScript选项开始生活。我想将package.json修改为包含react@18.0.0和react-dom@18.0.0，然后启动应用程序，这个步骤运行得很好。

然后，我试图按照React 18迁移指令告诉您的方式更改index.tsx文件，方法是将index.tsx中的相关段更改为：

ReactDOM.createRoot(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

npm run build或npm run start都会给出编译错误，说明createRoot没有定义。这可能是因为我对@types/react@17.0.43和@types/react-dom@17.0.14有依赖性。似乎还没有任何更新版本的这些文件从DefinitelyTyped反应18。

所以，我回去了，用npx create-react-app react18 --template typescript创建了一个全新的应用程序。它现在想要react@18和react-dom@18，但仍然有旧的@types/依赖项。当您从render()切换到createRoot()时，它还会给出相同的编译错误。

作为进一步的步骤，我问自己：“如果我们省略了TypeScript，会发生什么？”用npx create-react-app react18js创建了另一个应用程序。它与预期的一样依赖于react@18.0.0和react-dom@18.0.0，但仍然在其index.js输出中生成ReactDOM.render()。

这是可行的，但是将ReactDOM.render更改为ReactDOM.createRoot，您不会得到编译错误，但是如果尝试npm run start，也不会得到可见的输出。它似乎根本不呈现<App/>组件。

我是不是遗漏了什么？说明书不够充分吗？

Answer 1

首先需要从ReactDOM中导入react-dom/client，然后使用createRoot从元素id=root中创建根元素，然后使用.render在创建的根元素中呈现<App/>组件的内容，如下所示：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

let root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
);

Answer 2

React文档解释了如何使用ReactDOM.createRoot，它不是ReactDOM.render的直接/替代。

文档没有涵盖的是使用它的TypeScript方式。

我知道与在DOM元素上使用类型断言(as HTMLElement)的其他解决方案相比，这个解决方案有些过分，但它充分利用了严格键入的好处(例如，如果有人意外地删除了index.html中的#root元素)。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

const el = document.getElementById('root')
if (el === null) throw new Error('Root container missing in index.html')

const root = ReactDOM.createRoot(el)
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Answer 3

更改导入语句是使其工作的关键的第一步，其次是createRoot()的参数是不同的。为了记录在案，您需要将create src/index.tsx (或者src/index.jsx，如果不使用类型记录)更改为：

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOMClient.createRoot(document.getElementById("root") as HTMLElement);
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

下一步是清理测试，@test中的render()方法仍然使用旧的方法，但这是一个单独的主题。