Npmlibrary

renderElement

预计阅读时间: 3 分钟

渲染 UI 组件元素的工具函数。

renderElement 处理 Video.js React 中 UI 组件的渲染逻辑，包括默认标签渲染、render props、props 合并、ref 组合以及状态驱动的 className 和 style。

示例

基本用法

import { renderElement } from '@videojs/react';

function MyComponent({ playerState }) {
  return renderElement({
    element: 'button',
    className: 'my-button',
    props: {
      type: 'button',
      onClick: () => console.log('clicked'),
    },
    state: playerState,
    defaultClassName: 'vjs-control',
  });
}

配合 Render Props

import { renderElement } from '@videojs/react';

function CustomRenderer({ children, playerState }) {
  return renderElement({
    element: 'div',
    props: {
      role: 'group',
      'aria-label': 'Custom controls',
    },
    render: (props) => (
      <div {...props}>
        {typeof children === 'function'
          ? children(props)
          : children}
      </div>
    ),
    state: playerState,
  });
}

动态 ClassName 和 Style

import { renderElement } from '@videojs/react';

function StateDrivenElement({ playerState, isActive }) {
  return renderElement({
    element: 'div',
    className: (state) => isActive ? 'active' : 'inactive',
    style: (state) => ({
      opacity: isActive ? 1 : 0.5,
      transition: 'opacity 0.2s ease',
    }),
    props: {
      'data-state': playerState.paused ? 'paused' : 'playing',
    },
    state: playerState,
  });
}

API 参考

参数

参数	类型	默认值	说明
`element`	`string \| ReactElement`	—	默认 HTML 标签名称
`componentProps`	`object`	`{}`	传递给组件的 props
`params`	`RenderElementParams`	—	渲染参数配置

RenderElementParams

参数	类型	默认值	说明
`element`	`string \| ReactElement`	—	默认 HTML 标签或自定义元素
`className`	`string \| ((state: object) => string)`	—	CSS 类名或动态类名函数
`style`	`CSSProperties \| ((state: object) => CSSProperties)`	—	内联样式或动态样式函数
`props`	`object`	—	额外的 props 对象
`render`	`React.FC \| ((props: object) => ReactNode)`	—	自定义渲染函数（render prop）
`ref`	`RefObject \| RefCallback`	—	ref 对象或回调 ref
`state`	`object`	—	用于驱动动态 className 和 style 的状态对象
`defaultClassName`	`string`	—	默认 CSS 类名

返回值

ReactElement | null

返回渲染后的 React 元素，如果 render 函数返回 null 或 falsy 值则返回 null。

功能特性

Props 合并

renderElement 会自动合并多个来源的 props：

从 componentProps 传入的默认 props
从 params.props 传入的额外 props
自动计算的 props（如 ref、className、style）

Ref 组合

支持多种 ref 组合方式：

单独使用 ref 参数
使用 componentProps.ref
同时使用两者（会依次调用）

状态驱动的样式

当 className 或 style 为函数时，会使用 state 参数调用它们：

// 动态 className
className: (state) => state.isActive ? 'active' : 'inactive'

// 动态 style
style: (state) => ({ opacity: state.disabled ? 0.5 : 1 })

参见

useButton - 创建可访问按钮组件的钩子
useSnapshot - 订阅状态容器

#renderElement

#示例

#基本用法

#配合 Render Props

#动态 ClassName 和 Style

#API 参考

#参数

#RenderElementParams

#返回值

#功能特性

#Props 合并

#Ref 组合

#状态驱动的样式

#参见