Skip to main content

安装错误 <Composition>

问题​

🌐 Problem

你遇到了以下错误：

🌐 You are facing the following error:

<Composition> mounted inside another composition.

或者，在播放器内：

🌐 or, inside a player:

'<Composition> was mounted inside the `component` that was passed to the <Player>.'

解决方案​

🌐 Solution

在 Remotion 工作室​

🌐 In the Remotion Studio

错误的原因是一个<Composition>被嵌套在传递给另一个<Composition>的component中。

🌐 The cause for the error is that a <Composition> was nested inside the component that was passed to another <Composition>.

❌

const MyComp: React.FC = () => {
  return (
    <Composition
      id="another-comp"
      width={1080}
      height={1080}
      durationInFrames={30}
      fps={30}
      component={AnotherComp}
    />
  );
};

const Index: React.FC = () => {
  return (
    <Composition
      id="my-comp"
      width={1080}
      height={1080}
      durationInFrames={30}
      fps={30}
      component={MyComp}
    />
  );
};
note

在 Remotion 中没有理由嵌套合成。

  • 你想在另一个组件中包含一个组件吗？直接挂载它，方法是写：<AnotherComp />
  • 你想限制时长还是对其他组件进行时间偏移？请查看 <Sequence>。

要修复它，你必须移除嵌套的组合。

🌐 To fix it, you must remove the nested compositions.

在 Remotion 播放器中​

🌐 In the Remotion Player

错误的原因是，在你传入 Remotion Player 的 component 属性的组件中，你返回了一个 <Composition>。

🌐 The cause for the error is that in the component you passed in to the component prop of Remotion Player, you are returning a <Composition>.

❌

const MyComp: React.FC = () => {
  return (
    <Composition
      durationInFrames={300}
      fps={30}
      width={1080}
      height={1080}
      id="another-component"
      component={AnotherComp}
    />
  );
};

const Index: React.FC = () => {
  return (
    <Player
      durationInFrames={300}
      fps={30}
      compositionWidth={1080}
      compositionHeight={1080}
      component={MyComp}
    />
  );
};
note

<Player> 中不需要使用组合。仅在渲染和使用 Remotion Studio 时使用它们。

要解决它，请将组件直接传递给播放器的 component 属性，并向播放器提供 durationInFrames、fps、compositionHeight 和 compositionWidth 属性。

🌐 To fix it, pass the component directly to the player's component prop and provide the durationInFrames, fps, compositionHeight and compositionWidth props to the player.

✅

const Index: React.FC = () => {
  return (
    <Player
      durationInFrames={300}
      fps={30}
      compositionWidth={1080}
      compositionHeight={1080}
      component={AnotherComp}
    />
  );
};

另请参阅​

🌐 See also

Last updated on