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)