儘管使用相同的道具重新渲染組件

我有一個音頻組件，它從父級獲取它的源網址。儘管使用相同的道具重新渲染組件

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

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

}

這都是偉大的工作，每一次我通過音頻組件將autoPlay開始播放新的音頻一個新的URL。

問題是，有時傳遞的URL與前一個相同，但我仍然需要自動播放「新」源（與前一個相同）。由於React沒有看到任何更改，它不會更新組件，並且autoPlay不起作用。

有什麼想法？

謝謝！

來源

2016-11-11 Nicolas

強制更新組件您可以使用內置方法：this.forceUpdate()來重新呈現。方法也會跳過shouldComponentUpdate，所以組件會一直重新渲染。

在你的情況我明白，父組件是容器組件，就可以得到的數據，並將其發送到孩子，以避免與發送道具兒童發生變異，但創建使用immutable.js或只是創造新的新問題反對者Object.assign。

所以，如果你的父母組件都有這樣的代碼（僞代碼）：

someData.audioUrl="newAudioUrl";

將其更改爲：

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

該解決方案是quarantee是支撐參考將與同一URL ADRESS甚至改變，所以兒童組件會在不更新forceUpdate的情況下重新渲染。

來源

2016-11-11 17:04:33

我進入類似的問題，我設置狀態像this.setState（{navBarPinnedItem：e.currentTarget.dataset.name}）;並傳遞navBarPinnedItem作爲子組件中的道具。即使道具（即：navBarPinnedItem）相同，我也想重新渲染子組件，可以請你幫我解決這個問題。 –

另一種選擇是讓React完成它的工作，並在組件接收道具時重置當前時間。如果數據沒有改變，爲什麼要重新渲染？

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>

↑音頻自動播放警告！

來源

2016-11-11 17:26:45

儘管使用相同的道具重新渲染組件

回答

相關問題