Skip to main content

registerRoot()

registerRoot 是一个函数，用于注册 Remotion 项目的根组件。在根组件中，应该返回一个或多个组合（在多个组合的情况下，它们应该被包裹在一个 React Fragment 中）。

info

registerRoot() 应该存在于一个与组合列表分开的文件中。这是因为在使用 React Fast Refresh 时，文件中的所有代码都会被再次执行，但是这个函数应该只被调用一次。

示例​

src/index.ts
tsx
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
 
registerRoot(RemotionRoot);
src/index.ts
tsx
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
 
registerRoot(RemotionRoot);
src/Root.tsx
tsx
import MyComponent from "./MyComponent";
import MyOtherComponent from "./MyOtherComponent";
 
export const RemotionRoot = () => {
  return (
    <>
      <Composition
        id="comp"
        fps={30}
        height={1080}
        width={1920}
        durationInFrames={90}
        component={MyComponent}
      />
      <Composition
        id="anothercomp"
        fps={30}
        height={1080}
        width={1920}
        durationInFrames={90}
        component={MyOtherComponent}
      />
    </>
  );
};
src/Root.tsx
tsx
import MyComponent from "./MyComponent";
import MyOtherComponent from "./MyOtherComponent";
 
export const RemotionRoot = () => {
  return (
    <>
      <Composition
        id="comp"
        fps={30}
        height={1080}
        width={1920}
        durationInFrames={90}
        component={MyComponent}
      />
      <Composition
        id="anothercomp"
        fps={30}
        height={1080}
        width={1920}
        durationInFrames={90}
        component={MyOtherComponent}
      />
    </>
  );
};

推迟 registerRoot()​

在某些情况下，比如动态导入根组件或加载 WebAssembly，您可能希望推迟加载 registerRoot()。在 Remotion 的更新版本中，您可以这样做，而无需调用 delayRender()。

tsx
import { continueRender, delayRender, registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
 
loadWebAssembly().then(() => {
  registerRoot(RemotionRoot);
});
tsx
import { continueRender, delayRender, registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
 
loadWebAssembly().then(() => {
  registerRoot(RemotionRoot);
});

参见​