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"

您需要同时升级 react 和 react-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。您无需做任何操作。