Skip to main content

useRemotionEnvironment()v4.0.342

一个 React hook，用于提供关于当前 Remotion 环境的信息。这是访问环境信息的首选方式。

🌐 A React hook that provides information about the current Remotion Environment. This is the preferred way to access environment information.

它返回一个具有以下属性的对象：

🌐 It returns an object with the following properties:

  • isStudio：钩子是否在 Remotion Studio 中被调用。
  • isRendering：钩子是否在渲染中被调用。
  • isPlayer：当前页面是否挂载了 <Player>。
  • isReadOnlyStudio：无论是在静态部署的工作室中，还是无法使用@remotion/studio API 的情况下
  • isClientSideRendering：函数是否在客户端渲染上下文中被调用（从 v4.0.344 起可用）

如果你希望组件根据环境表现不同，这可能会很有用。

🌐 This can be useful if you want components to behave differently depending on the environment.

示例​

🌐 Example

import React from 'react';
import {useRemotionEnvironment} from 'remotion';

export const MyComp: React.FC = () => {
  const {isStudio, isPlayer, isRendering} = useRemotionEnvironment();

  if (isStudio) {
    return <div>I'm in the Studio!</div>;
  }

  if (isPlayer) {
    return <div>I'm in the Player!</div>;
  }

  if (isRendering) {
    return <div>I'm Rendering</div>;
  }

  return <div>Hello World!</div>;
};

为什么使用这个钩子而不是 getRemotionEnvironment()？​

🌐 Why use this hook instead of getRemotionEnvironment()?

虽然 getRemotionEnvironment() 适用于当前的使用场景，但 useRemotionEnvironment() 对于浏览器渲染场景是面向未来的，其中预览和渲染可能会在同一页面上同时发生。

🌐 While getRemotionEnvironment() works for the current use cases, useRemotionEnvironment() is future-proof for browser rendering scenarios where preview and render might happen on the same page simultaneously.

这个钩子有助于将环境信息限定到调用它的组件的上下文中，而不是全局范围。

🌐 The hook helps to scope the environment information to the context of component that calls it, rather than globally.

兼容性​

🌐 Compatibility

BrowsersEnvironments
Chrome
Firefox
Safari

另请参阅​

🌐 See also

Last updated on