React - Wie kann ich den Status von einer anderen Komponente aktualisieren?

Question

Ich habe ein Problem mit einer reaktiven Videokomponente, ich habe 2 Komponenten, die erste ist eine Videokomponente, er kann Youtube Video spielen, die zweite ist eine Liste von Videoelementen, und wenn ich auf ein Kind dieser Liste klicke, Ich möchte das Video der ersten Komponente (der Videokomponente) ändern, aber ich versuche seit 2 Stunden, neue Requisiten an eine andere Komponente zu senden, und ich kann dies nicht tun.

Dies ist mein Code für:

erste Komponente (Videoblock)

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

zweite Komponente (Liste der Videos)

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

Wenn irgendwelche Leute, eine Lösung oder eine Alternative danke im voraus

Grüße

William

Answer 1

Sie können eine übergeordnete Komponente erstellen, die den Zustand speichert und übergibt sie als Requisiten bis zu den Kindern.

Im Elternteil behalten Sie die Videoquelle als Status und leiten sie über Requisiten an den Videoblock weiter.

In der Eltern haben Sie eine 'changeVideoSource (source) `Funktion, die den Zustand ändert. Sie übergeben diese Handler-Funktion an Ihre Karussell-Liste, die ausgeführt wird, wenn das Video ausgewählt wird. z.B. als 'videoSourceChangeHandler'.

Sie sollten in Betracht ziehen, dass die Elternkomponente mehr vom Status/Datenladen handhabt, die Ihre Kindkomponenten in ihrer Handhabung von Requisiten nur "reiner" machen und nicht angeben können.

See the suggestion in the docs

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