VideoJS 覆盖和反应

Question

我想知道，是否可以添加一个反应组件作为内容？

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

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

SomeReactComponent 只是一个用于动态图像渲染器的反应组件，看起来像这样

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 了解更多信息。