video.js - VideoJS 覆盖和 react

Question

我想知道，是否可以添加 react 组件作为内容？

我像这样在覆盖层内添加了组件 -

 this.player.overlay({
      content: <SomeReactComponent />,
      align: 'bottom-left',
      overlays: [{
        start: 'play',
        end: 'end'
      }]
    });

并且 SomeReactComponent 只是一个动态图像渲染器的 react 组件，看起来像这样

import like from './like.png';
import love from './love.png';
import neutral from './neutral.png';

class SomeReactComponent extends Component {
  getImage(pic) {
    const image = pic;
    return image;
  }

  render() {
    const pic = [love, like, neutral];

    return (
        <div>
          { sentimentsArray.map(sentiment =>
            <img src={this.getImage(pic)} style={{ width: '75%', height: '75%', objectFit: 'scale-down' }} />
          )}
        </div>
    );
  }
}

当我在控制台中调用 this.player.overlay 时，它说 overlays.options.content 是 React.element 的符号，但是，我没有得到任何作为覆盖的东西

Answer 1

不幸的是，无法将此属性使用 React 组件，但只能使用字符串或节点元素。看看doc想要查询更多的信息。