# @editframe/react 中文文档

规范地址：https://npmcn.com/package/%40editframe/react/

版本：0\.60\.37
npm 元数据更新时间：2026-10-30T19:13:14.335Z
中文译文更新时间：2026-11-13T07:01:49.254Z
软件包许可：SEE LICENSE IN LICENSE-FULL\.md

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40editframe/react
原文对照：https://npmcn.com/package/%40editframe/react/?lang=original
项目主页：https://github.com/editframe/monorepo#readme
源码仓库：https://github.com/editframe/monorepo

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：453 kB，67 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0，@react-three/fiber \>=8\.0\.0，@react-three/offscreen \>=0\.0\.8
- 首次发布：2023-03-16T01:55:18.786Z
- 最新版本发布：2026-10-30T19:13:14.121Z
- 近 30 天下载量：6390（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：345（近 12 个月 212 个）

## 中文简介

初等回放包装器+钩子为@editframe/元素.

## 安装

```sh
npm install @editframe/react
```

也可以使用：`pnpm add @editframe/react`、`yarn add @editframe/react`、`bun add @editframe/react`

## README

# @ editframe/ 反应

对 Editframe Elements 的响应绑定 .

## 安装

```sh
npm install @editframe/react
```

反应 18 或以后 `react-dom` 需要这样做。 也导入约束 注册“元素”自定义元素.

## 组成道具

收发器接受基本元素的 JavaScript 属性, 加 标准反应道具,例如 `children`, (中文(简体) ), `className`, (中文(简体) ), `style`,以及 `ref`。 。 。 . 使用 `playbackRate` 用于源速度和通过 `volumeAtTime` 作为函数 :

```tsx
import { Configuration, Text, Timegroup, TimelineRoot, Video } from "@editframe/react";

const fade = (localTime: number) =>
  Math.max(0, Math.min(1, localTime / 0.25, (4 - localTime) / 0.25));

function Cut({ id }: { id: string }) {
  return (
    <Timegroup id={id} mode="fixed" duration="4s"
      style={{ position: "relative", width: 640, height: 360 }}>
      <Video src="/take.mp4" sourcein="2s" sourceout="10s"
        playbackRate={2} volume={0.8} volumeAtTime={fade}
        style={{ width: "100%", height: "100%" }} />
      <Text duration="4s"
        style={{ position: "absolute", top: 24, left: 24, lineHeight: 1.15 }}>
        A four-second cut
      </Text>
    </Timegroup>
  );
}

export function Composition() {
  return (
    <Configuration>
      <TimelineRoot id="cut" component={Cut} />
    </Configuration>
  );
}
```

这消耗了8个源秒的4个组成秒,保留 音频投出。 支助 `playbackRate` 值为 `0.25` 结束 `4`,与 `1` 作为默认。 无效的财产指派 `RangeError`。 。 。 . `volumeAtTime` 获取剪辑本地构成秒并返回 a 乘数 `volume` 从 `0` 改为 `1`。每个音频对信封进行评估 导出时的样本 。 见 [内容读取](https://npmcn.com/package/%40editframe/elements/README.md) 页:1 三进制规则和一个 compare- clone 导出示例.

`TimelineRoot` 登记用于导出和缩略图的 React 重载,所以 反应钩和帧回调在渲染克隆中运行. 内容 `component` 必须使 `Timegroup` 作为它的根。 对于播放,请附加挂载 带有时间组 `EFConfigurationElement` 裁判 `attachPlayback(root)`· ; `Configuration` 单靠它不附加控制器。 A 类 `Workbench` 包装 可以自动附加播放.

`Configuration` 财务报告和审定财务报表 `Text` 接受普通JSX道具和打入元素参考 0.60.34中直接使用;不需要apps侧重制版. 自定义事件处理器, 例如 `Video`是因为 `onReadyStateChange`,保留其特定组成部分 事件类型。 其他元素属性按名称而不是 (b) 参考基本要件类别 支持的数值.

见 [文档](https://editframe.com/docs) 编辑 [构成技能](https://editframe.com/skills/composition.md) 为了更多 用途.

## 常见问题

### @editframe/react 是什么？

初等回放包装器\+钩子为@editframe/元素\.

### 如何安装 @editframe/react？

在项目目录运行 npm install @editframe/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @editframe/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @editframe/react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @editframe/react 可以商用吗？

@editframe/react 使用 SEE LICENSE IN LICENSE-FULL\.md 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @editframe/react 的下载量有多少？

根据 npm 官方下载统计，@editframe/react 在 2026/10/13 – 2026/11/11 这 30 天内被下载 6,390 次，日均约 213 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @editframe/react 还在维护吗？

最新版本 0\.60\.37 发布于 2026/10/31（13 天前）；至今共发布 345 个版本，其中过去 12 个月发布了 212 个；首次发布于 2023/03/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。