Skip to main content

升级到 React 18

更新包

要使用 React 18 的最新功能,您需要至少使用 Remotion 的 3.0.0 版本。

diff
- "remotion": "2.6.15"
- "@remotion/bundler": "2.6.15"
- "@remotion/cli": "2.6.15"
- "@remotion/renderer": "2.6.15"
+ "remotion": "3.0.0"
+ "@remotion/bundler": "3.0.0"
+ "@remotion/cli": "3.0.0"
+ "@remotion/renderer": "3.0.0"
diff
- "remotion": "2.6.15"
- "@remotion/bundler": "2.6.15"
- "@remotion/cli": "2.6.15"
- "@remotion/renderer": "2.6.15"
+ "remotion": "3.0.0"
+ "@remotion/bundler": "3.0.0"
+ "@remotion/cli": "3.0.0"
+ "@remotion/renderer": "3.0.0"

您需要同时升级 reactreact-dom

diff
- "react": "17.0.1"
- "react-dom": "17.0.1"
+ "react": "18.2.0"
+ "react-dom": "18.2.0"
diff
- "react": "17.0.1"
- "react-dom": "17.0.1"
+ "react": "18.2.0"
+ "react-dom": "18.2.0"

如果您使用 TypeScript,请同时更新到最新的类型:

diff
- "@types/react": "17.0.3"
+ "@types/react": "18.0.0"
diff
- "@types/react": "17.0.3"
+ "@types/react": "18.0.0"

之后运行 npm i,或 yarn,或 pnpm i,根据您的包管理器进行匹配。

修复 React.FC 类型

React.FC 的类型已更改,不再包含 children。如果出现类型错误,请更改

tsx
const MyComp: React.FC = ({ children }) => <div>{children}</div>;
tsx
const MyComp: React.FC = ({ children }) => <div>{children}</div>;

为:

tsx
const MyComp: React.FC<{
children: React.ReactNode;
}> = ({ children }) => <div>{children}</div>;
tsx
const MyComp: React.FC<{
children: React.ReactNode;
}> = ({ children }) => <div>{children}</div>;

createRoot() 无需操作

如果安装了 React 18,Remotion 将自动使用 react-dom/client 中的 createRoot(),而不是 react-dom 中的 render。您无需做任何操作。