升级到 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
。您无需做任何操作。