为什么在playing={false}的时候react-player也在播放视频？

Question

react-player即使在playing={false}的时候也在播放视频。我使用的是antd modal，它包裹在我的播放器上。当我关闭时，模式状态变为false。它被传递到react-player中，但播放器继续在后台播放。

    import React, { Component } from 'react'
    import { Modal } from "antd";
    import ReactPlayer from "react-player";

    export class demo extends Component {
        constructor(props) {
            super(props);
            this.state = {
            isModalOpen: false,
            };
        }

        ConfirmationModalhandleCancel = () => {
            this.setState({ isModalOpen: false });
        };
        
        ConfirmationModalPlay = () => {
            this.setState({ isModalOpen: true });
        };

        getVideo = () => {
            console.log("Modal state",this.state.isModalOpen)
            return (
            <ReactPlayer
                playing={this.state.isModalOpen}
                className="introductionVideoLearningPlanPage"
                controls={true}
                url="https://www.youtube.com/watch?v=agi4geKb8v8"
            />
            );
        };
        
        getIntroVideoModal = () => {
            return (
            <Modal
            title={null}
            footer={null}
            visible={this.state.isModalOpen}
            onCancel={this.ConfirmationModalhandleCancel}
            width="fit-content"
            bodyStyle={{ padding: '0' }}
        >
            {this.getVideo()}
        </Modal>
            )
        }
        
        render() {
            return (
                <div>
                    {this.getIntroVideoModal()}
                </div>
            )
        }
    }

    export default demo

我观察到，当模式关闭但播放器继续播放时，console.log("Modal state"，this.state.isModalOpen)是“安慰假”。react-player版本: 2.6.2和2.9.0。模式关闭后如何停止播放视频？

Answer 1

此问题特定于antd modal。我尝试了reactstrap modal，它起作用了。