Skip to main content

错误地挂载 <Composition>

问题​

您遇到了以下错误：

<Composition> 被挂载在另一个组合中。
<Composition> 被挂载在另一个组合中。

或者，在播放器中：

'<Composition> 被挂载在传递给 <Player> 的 `component` 中。'
'<Composition> 被挂载在传递给 <Player> 的 `component` 中。'

解决方案​

在 Remotion Studio 中​

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

❌
tsx
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}
    />
  );
};
❌
tsx
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>。

要修复此问题，您必须移除嵌套的组合。

在 Remotion Player 中​

错误的原因是您在传递给 Remotion Player 的 component 属性中返回了一个 <Composition>。

❌
tsx
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}
    />
  );
};
❌
tsx
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 属性。

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

另请参阅​