传递给React Player的onWrapper封装不起作用

问题描述

我需要显示Youtube视频，所以我正在使用React Player。 只需单击我的视频，我就必须全屏显示它。 这是我的代码：

import ReactPlayer from 'react-player/lazy';
import { SerializedStyles } from '@emotion/core';
import _pick from 'lodash/pick';

import { StyledplayerContainer,StyledContainer } from './style';

export const PROPS_TO_PICK_FOR_REACT_PLAYER = [
  'controls','loop','muted','height','width','url'
];

export interface Props {
  autoplay?: boolean;
  controls?: boolean;
  loop?: boolean;
  muted?: boolean;
  height?: string;
  width?: string;
  url: string;
  containerStyles?: SerializedStyles;
  playerContainerStyles?: SerializedStyles;
  onClick: (e: MouseEvent) => void;
}

const Wrapper = ({ children }) => <div>{children}</div>

const Player: React.FC<Props> = (props) => {
  const { onClick,containerStyles,autoplay,playerContainerStyles } = props;
  return(
    <StyledContainer css={containerStyles}>
       <StyledplayerContainer css={playerContainerStyles}>
        <ReactPlayer
          {..._pick(props,PROPS_TO_PICK_FOR_REACT_PLAYER)}
          playing={autoplay}
          onClick={onClick}
          wrapper={Wrapper}
        />
     </StyledplayerContainer>
    </StyledContainer>
  )
}

Player.defaultProps = {
  controls: true,height: '100%',width: '100%',loop: false,muted: false,autoplay: true,};

export default Player;

根据React-Player文档，我可以传递一个包装器，然后onClick来响应播放器，并且onClick将被提供给我的包装器。 正如在devtools中检查的那样，单击处理程序已附加到我的包装器中，但未被调用。 尝试也将onClick应用于StyledContainer和StyledplayerContainer，但是没有被调用。

解决方法

onClick在传递给react-player的包装时将永远无法工作，因为react-player为youtube安装了iframe。 iframe充当一个单独的文档，因此，事件从iframe开始并在iframe结束，这意味着捕获从iframe开始，传播仅在iframe结束，因此包装器的onClick永远不会被调用。