Question

我有一个反应视频组件的问题，我有2个组件，第一个是视频组件，他可以播放youtube视频，第二个是视频元素列表，当我点击这个列表的孩子，我想改变第一个组件（视频组件）的视频，但我尝试了2小时后将新道具发送到另一个组件，我无法做到这一点。

这是我的代码：

第一个组件（视频块）

var VideoMainItem = React.createClass({
    getInitialState: function() {
        return {
            video: null
        };
    },
    handleClick: function() {
        var button = $(this.refs.button);
        var thumbnail = $(this.refs.thumbnail);

        button.hide();
        thumbnail.hide();

        this.setState({
            video: <VideoHook source={this.props.source} />
        });
    },
    render: function() {
        return (
            <div className="nativ-VideoBlockComponent-main">
                <div className="nativ-VideoBlockComponent-main-video">
                    <span ref="button" onClick={this.handleClick} className="nativ-VideoBlockComponent-main-video-button"></span>
                    <div ref="thumbnail" className="nativ-VideoBlockComponent-main-video-thumbnail"></div>
                    {this.state.video}
                </div>
                <div className="nativ-VideoBlockComponent-main-content">
                    <span className="nativ-VideoBlockComponent-main-content-title">Lorem ipsum dolor sit amet</span>
                    <span className="nativ-VideoBlockComponent-main-content-description">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias Excepturi sint occaecati cupiditate non provident.</span>
                </div>
            </div>
        );
    }
});

第二部分（视频列表）

var VideoCarousselItem = React.createClass({
    getInitialState: function() {
        return {
            video: this.props.video
        };
    },
    addThumbnail: function(video) {
        return {
            'backgroundImage': 'url(' + asset('assets/images/videoblock/thumbnail_01.jpg') + ')'
        };
    },
    handleClick: function() {
        console.log('VideoCarousselItem::handleClick');

        <VideoMainItem video={this.state.video} />
    },
    render: function() {
        return (
            <div className="nativ-VideoBlockComponent-caroussel-item">
                <span className="nativ-VideoBlockComponent-caroussel-item-button"></span>
                <div onClick={this.handleClick} className="nativ-VideoBlockComponent-caroussel-item-thumbnail" style={this.addThumbnail(this.state.video)}></div>
            </div>
        );
    }
});

如果有人有解决方案或替代方案，请提前感谢

此致

威廉

Answer 1

您可以创建一个存储状态的父组件，并将其作为道具传递给子组件。

在父级中，您将视频源保持为状态，并通过道具将其传递给视频块。

在父级中你有一个'changeVideoSource（source）`函数来修改状态。您将该处理程序功能传递给您的轮播列表，以便在选择视频时执行。例如作为'videoSourceChangeHandler'。

您可能需要考虑让父组件处理更多的状态/数据加载，这可以使您的子组件仅在处理props而不是状态时“更纯粹”。

See the suggestion in the docs

或see this stackoverflow question (particularly scenario #2 for code example)

React - 如何从其他组件更新状态？

1 个答案: