我需要展示 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 但它没有被调用。