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

Question

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

这是我的代码：

1分量（视频块）

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> 
     ); 
    } 
}); 

如果任何人有一个解决方案或替代，谢谢

Regards

William

Answer 1

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

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

在父项中，您有一个'changeVideoSource（source）`函数来修改状态。您将该处理函数传递到您的轮播列表以在视频被选中时执行。例如作为'videoSourceChangeHandler'。

您可能需要考虑让父组件处理更多的状态/数据加载，这可以使您的子组件处理更多的道具而不是状态。

See the suggestion in the docs

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