Skip to main content

向组合传递属性

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

🌐 You can parametrize the content of the videos using React properties ("props").

定义接受的属性​

🌐 Defining accepted props

要定义你的视频组件接受哪些属性，给你的组件指定 React.FC 类型，并传入一个泛型参数来描述你想要接受的属性的形状：

🌐 To define which props your video accepts, give your component the React.FC type and pass in a generic argument describing the shape of the props you want to accept:

src/MyComponent.tsx
type Props = {
  propOne: string;
  propTwo: number;
}

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

定义默认属性​

🌐 Define default props

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

🌐 When registering a component that takes props as a composition, you must define default props:

src/Root.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,
        }}
      />
    </>
  );
};

默认属性很有用，这样你在预览视频时不会没有数据。默认属性将被输入属性覆盖。

🌐 Default props are useful so you don't preview your video with no data. Default props will be overriden by input props.

定义一个模式v4.0.0​

🌐 Define a schemav4.0.0

你可以使用 Zod 来 为你的组合定义类型安全的模式。

🌐 You can use Zod to define a typesafe schema for your composition.

输入属性​

🌐 Input props

输入属性是指在调用渲染时传入的属性，它们可以替换或覆盖默认属性。

🌐 Input props are props that are passed in while invoking a render that can replace or override the default props.

note

输入属性必须是对象，并且可以序列化为 JSON。

在 CLI 中传递输入属性​

🌐 Passing input props in the CLI

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

🌐 When rendering, you can override default props by passing a CLI flag. It must be either valid JSON or a path to a file that contains valid JSON.

Using inline JSON
npx remotion render HelloWorld out/helloworld.mp4 --props='{"propOne": "Hi", "propTwo": 10}'
Using a file path
npx remotion render HelloWorld out/helloworld.mp4 --props=./path/to/props.json

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

🌐 Passing input props when using server-side rendering

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

🌐 When server-rendering using renderMedia() or renderMediaOnLambda(), you can pass props using the inputProps option:

import {renderMedia, selectComposition} from '@remotion/renderer';

const inputProps = {
  titleText: 'Hello World',
};

const composition = await selectComposition({
  serveUrl,
  id: 'my-video',
  inputProps,
});

await renderMedia({
  composition,
  serveUrl,
  codec: 'h264',
  outputLocation,
  inputProps,
});

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

🌐 You should pass your inputProps to both selectComposition() and renderMedia().

在 GitHub Actions 中传递输入参数​

🌐 Passing input props in GitHub Actions

参见：使用 GitHub Actions 渲染

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

🌐 When using GitHub Actions, you need to adjust the file at .github/workflows/render-video.yml to make the inputs in the workflow_dispatch section manually match the shape of the props your root component accepts.

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'

检索输入属性​

🌐 Retrieve input props

输入的 props 会直接传递给你 <Composition> 的 component，你可以像访问普通 React 组件的 props 那样访问它们。

🌐 Input props are passed to the component of your <Composition> directly and you can access them like regular React component props.

如果你在根组件中需要输入属性，请使用 getInputProps() 函数来获取输入属性。

🌐 If you need the input props in your root component, use the getInputProps() function to retrieve input props.

你仍然可以正常使用组件​

🌐 You can still use components normally

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

🌐 Even if a component is registered as a composition, you can still use it like a regular React component and pass the props directly:

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

如果你想把多个场景连接在一起，这很有用。你可以使用 <Series> 来依次播放两个组件：

🌐 This is useful if you want to concatenate multiple scenes together. You can use a <Series> to play two components after each other:

ChainedScenes.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>。

🌐 You may then register this "Master" component as an additional <Composition>.

另请参阅​

🌐 See also

Last updated on