registerRoot()

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

info

registerRoot() 应该保存在一个独立于作品列表的文件中。这是因为在使用 React 快速刷新时，文件中被刷新的所有代码都会被重新执行，而这个函数只应该被调用一次。

示例

🌐 Example

src/index.ts
import {registerRoot} from 'remotion';
import {RemotionRoot} from './Root';

registerRoot(RemotionRoot);

src/Root.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()

🌐 Defer registerRoot()

在某些情况下，例如动态导入根或者加载 WebAssembly，你可能希望延迟加载 registerRoot()。在较新的 Remotion 版本中，你可以这样做，而无需调用 delayRender()。

🌐 In some cases, such as dynamically importing roots or loading WebAssembly, you might want to defer the loading of registerRoot(). In newer versions of Remotion, you may do so, without having to invoke delayRender().

import {continueRender, delayRender, registerRoot} from 'remotion';
import {RemotionRoot} from './Root';

loadWebAssembly().then(() => {
  registerRoot(RemotionRoot);
});

兼容性

🌐 Compatibility

Browsers			Servers			Environments
Chrome	Firefox	Safari	Node.js	Bun	Serverless Functions	Client-side rendering	Server-side rendering	Player	Studio

另请参阅

🌐 See also

• 此函数的源代码
• <Composition /> 组件
• 基础