javascript - 如何使用 Facebook React 更新视频源？

Question

我是 React 新手。

我正在尝试使用 React 更新视频源。一切都很顺利，但我必须单击按钮两次才能加载视频。我不确定是什么原因造成的。

这是我的代码。

class Dashboard extends React.Component {
    constructor() {
        super();
        this.chooseVideo = this.chooseVideo.bind(this);
        this.state = {
            videoPreviewUrl: ''
        }
    }
    chooseVideo (fileUrl) {
        this.setState({videoPreviewUrl: fileUrl});
        var vid = document.getElementById('videoPreview');
        vid.load();
    }

    render() {
        return <div>
                <VideoEditor url={this.state.videoPreviewUrl}/>
            </div>
    }
}


class VideoEditor extends React.Component {
    render () {
        return <div id="videoEditorPane" className="col-md-9">
            <div className="row">
                <div className="col-md-6">
                    <video id="videoPreview" preload="auto" width="640" height="480">
                        <source src={this.props.url} type="video/mp4" />
                    </video>
                    <StoryBoard/>
                </div>
            </div>
        </div>;
    }
}

方法 chooseVideo 已正确传递视频的 url。所以，我想我应该改变这种状态。当我看到 DOM 的源代码时，视频源已正确更改。但是，我必须点击两次。我不确定这是否是 this.State() 和 vid.load() 之间的竞争问题？

Answer 1

将 vid.load() 放入 VideoEditor 中的 componentWillReceiveProps(nextProps) 中。这样您就可以避免计时问题。