VideoJS叠加和React

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