Skip to main content

将属性传递给组合

您可以使用React 属性（"props"）来参数化视频内容。

定义接受的 props​

要定义您的视频接受哪些 props，请为您的组件提供 React.FC 类型，并传入描述您想要接受的 props 形状的泛型参数：

src/MyComponent.tsx
tsx
type Props = {
  propOne: string;
  propTwo: number;
}
 
export const MyComponent: React.FC<Props> = ({propOne, propTwo}) => {
  return (
    <div>props: {propOne}, {propTwo}</div>
  );
}
src/MyComponent.tsx
tsx
type Props = {
  propOne: string;
  propTwo: number;
}
 
export const MyComponent: React.FC<Props> = ({propOne, propTwo}) => {
  return (
    <div>props: {propOne}, {propTwo}</div>
  );
}

定义默认 props​

注册一个以组合形式接受 props 的组件时，必须定义默认 props：

src/Root.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComponent } from "./MyComponent";
 
export const Root: React.FC = () => {
  return (
    <>
      <Composition
        id="my-video"
        width={1080}
        height={1080}
        fps={30}
        durationInFrames={30}
        component={MyComponent}
        defaultProps={{
          propOne: "Hi",
          propTwo: 10,
        }}
      />
    </>
  );
};
src/Root.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComponent } from "./MyComponent";
 
export const Root: React.FC = () => {
  return (
    <>
      <Composition
        id="my-video"
        width={1080}
        height={1080}
        fps={30}
        durationInFrames={30}
        component={MyComponent}
        defaultProps={{
          propOne: "Hi",
          propTwo: 10,
        }}
      />
    </>
  );
};

默认 props 很有用，这样您就不会预览到没有数据的视频。默认 props 将被输入 props 覆盖。

定义一个 schemav4.0.0​

您可以使用Zod来为您的组合定义一个类型安全的 schema。

输入 props​

输入 props 是在调用渲染时传入的 props，可以替换或覆盖默认 props。

note

输入 props 必须是一个对象，并且可序列化为 JSON。

在 CLI 中传递输入 props​

在渲染时，您可以通过传递 CLI 标志来覆盖默认 props。它必须是有效的 JSON 或包含有效 JSON 的文件路径。

使用内联 JSON
bash
npx remotion render HelloWorld out/helloworld.mp4 --props='{"propOne": "Hi", "propTwo": 10}'
使用内联 JSON
bash
npx remotion render HelloWorld out/helloworld.mp4 --props='{"propOne": "Hi", "propTwo": 10}'
使用文件路径
bash
npx remotion render HelloWorld out/helloworld.mp4 --props=./path/to/props.json
使用文件路径
bash
npx remotion render HelloWorld out/helloworld.mp4 --props=./path/to/props.json

在使用服务器端渲染时传递输入 props​

在使用 renderMedia() 或 renderMediaOnLambda() 进行服务器端渲染时，您可以使用 inputProps 选项传递 props：

你应该将你的 inputProps 传递给 selectComposition() 和 renderMedia()。

在 GitHub Actions 中传递输入属性​

查看：使用 GitHub Actions 渲染

在使用 GitHub Actions 时，您需要调整 .github/workflows/render-video.yml 文件，以使 workflow_dispatch 部分中的输入手动匹配您的根组件接受的属性的形状。

yaml
workflow_dispatch:
  inputs:
    titleText:
      description: "Which text should it say?"
      required: true
      default: "Welcome to Remotion"
    titleColor:
      description: "Which color should it be in?"
      required: true
      default: "black"
yaml
workflow_dispatch:
  inputs:
    titleText:
      description: "Which text should it say?"
      required: true
      default: "Welcome to Remotion"
    titleColor:
      description: "Which color should it be in?"
      required: true
      default: "black"

检索输入属性​

输入属性直接传递给您的 <Composition> 的 component，您可以像常规 React 组件属性一样访问它们。

如果您需要在根组件中使用输入属性，请使用 getInputProps() 函数检索输入属性。

仍然可以正常使用组件​

即使一个组件被注册为一个组合，您仍然可以像普通的 React 组件一样使用它，并直接传递属性：

tsx
<MyComponent propOne="hi" propTwo={10} />
tsx
<MyComponent propOne="hi" propTwo={10} />

如果您想要将多个场景连接在一起，这是有用的。您可以使用 <Series> 来播放两个组件：

ChainedScenes.tsx
tsx
import { Series } from "remotion";
 
const ChainedScenes = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={90}>
        <MyComponent propOne="hi" propTwo={10} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={90}>
        <AnotherComponent />
      </Series.Sequence>
    </Series>
  );
};
ChainedScenes.tsx
tsx
import { Series } from "remotion";
 
const ChainedScenes = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={90}>
        <MyComponent propOne="hi" propTwo={10} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={90}>
        <AnotherComponent />
      </Series.Sequence>
    </Series>
  );
};

然后，您可以将这个 "Master" 组件注册为额外的 <Composition>。

另请参阅​