Re-Rendering-Komponente trotz der gleichen Requisiten

Question

Ich habe eine Audio-Komponente, die ihre Quell-URL vom Elternteil bekommen.

export default class VideoPlayback extends Component { 
constructor (props) { 
    super(props) 
} 

render() { 
    return (
     <audio src={this.props.audioUrl} id="activeModuleAudio" style={{ width: '80%' }} autoPlay controls /> 
    ); 
} 

}

Es ist alles funktioniert großartig und jedes Mal, passiere ich die Audio-Komponente eine neue URL der Autoplay-die neue Audio-Wiedergabe beginnt.

Das Problem ist, dass manchmal die URL, die übergeben wird, ist die gleiche wie die vorherige, aber ich würde immer noch die "neue" Quelle (die gleiche wie die vorherige auch) autoPlay. Da React keine Änderung erkennt, wird die Komponente nicht aktualisiert, und autoPlay funktioniert nicht.

Irgendwelche Gedanken?

Danke!

Answer 1

So erzwingen Sie die Aktualisierungskomponente Sie können die integrierte Methode this.forceUpdate() zum Rendern verwenden. Die Methode überspringt auch shouldComponentUpdate, so dass die Komponente immer neu gerendert wird.

in Ihrer Situation verstehe ich, dass übergeordnete Komponente Container-Komponente so ist bekommt Daten und senden Sie es an Kinder ab, um Probleme zu vermeiden mit Requisiten, um Kinder nicht mutieren sie zu senden, aber neue erstellen mit immutable.js oder einfach nur neu erstellen Objekt von Object.assign.

Also, wenn Ihre Mutterkomponente, wie Code (Pseudo-Code) hat:

someData.audioUrl="newAudioUrl"; 

Änderung es zu:

someData=Object.assign({},someData,{audioUrl:"newAudioUrl"}); 

Diese Lösung ist quarantee die Referenz prop wird sogar mit der gleichen URL-Adresse ändern , so Kinder-Komponente wird ohne ForceUpdate erneut rendern.

Answer 2

Eine andere Option wäre, React seine Sache machen zu lassen und nur die aktuelle Zeit zurückzusetzen, wenn die Komponente Requisiten empfängt. Wenn sich die Daten nicht ändern, warum wird dann gerendert?

const audio = 'https://upload.wikimedia.org/wikipedia/commons/transcoded/b/bb/Test_ogg_mp3_48kbps.wav/Test_ogg_mp3_48kbps.wav.ogg'; 
 

 
class Player extends React.Component { 
 
    componentWillReceiveProps() { 
 
    this.refs.audio.currentTime = 0; 
 
    } 
 

 
    render() { 
 
    return <audio ref="audio" src={this.props.audio} autoPlay controls />; 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { audio } 
 
    } 
 

 
    passSameProps() { 
 
    this.setState({ audio }); 
 
    } 
 

 
    render() { 
 
    return(
 
     <div> 
 
     <button onClick={this.passSameProps.bind(this)}>Pass same props!</button> 
 
     <Player audio={this.state.audio} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="View"></div>

↑ Audio automatische Wiedergabe Warnung!