主要問題是 父組件通過props 傳值后子組件不會重新渲染

<MetalTypeInfo id={this.state.id} /> //id 修改后不會重新渲染<MetalTypeInfo>

子組件
構造方法接收props 放入state中

constructor(props: defaultProps) {super(props);this.state = {data: [], // 數據id: props.id, // 當前選中的 item index};}

問題在于父組件傳遞的id修改后不會改變其子組件的state 也不會渲染
具體解決方法
第一種方法、當自己子組件是自己封裝時

1、組件中添加componentWillReceiveProps(nextProps)生命周期函數，當props有變化時，及時將state中的數據替換掉 2、不將數據放到state中，在render中直接用props中的data去渲染

由于componentWillReceiveProps 被棄用了 修改為
static getDerivedStateFromProps(nextProps, prevState)
返回值就可以直接修改state的內容

static getDerivedStateFromProps(nextProps, prevState){if (nextProps.role.menus !== prevState.menus) {// 額外寫一個newMeuns state來記錄上一個props，在組件渲染的時候傳入這個更新后的newMeunsreturn {newMenus:nextProps.role.menus};} // 不更新statereturn null }

第二種方法、 讓redux 認為這不是同一種組件
1、在返回屬性不同的組件時，最外面在包一層不同的dom元素

getGreetRender (value){if (value > 0) {return <p><Greeter data = { 'hello wky' } /></p>} else {return <div><Greeter data = { 'wky hello' } /></div>} } 這樣在虛擬dom diff的時候 會認為這是兩個不同的dom節點，所以就會去重新生成Greeter節點

用三目運算符

getGreetRender (value){if (value > 0) {return <Greeter data = { 'hello wky' } />} else {return <Greeter data = { 'wky hello' } />} } {this.props.value>0?<div>{ this.getGreetRender(this.props.value) }</div>:""}{this.props.value<=0?<div>{this.getGreetRender(this.props.value)}</div>:''} <!--原理同上，還是通過包裹，變成兩個不同的組件-->

3 key(key值不同會認為是不同的組件) —最好用但不知道是不是重新渲染后之前的組件是不是被銷毀

getGreetRender (value){if (value > 0) {return <Greeter key={+new Date} data = { 'hello wky' } />} else {return <Greeter key={+new Date} data = { 'wky hello' } />} } // 保證前后兩次返回的Greeter組件中的key值不同即可

結合文章
1、https://www.jianshu.com/p/12524a41fdb0
2、https://juejin.cn/post/6844903927507320845

總結

以上是生活随笔為你收集整理的明明两次返回的组件中的props不一致，为什么dom不重新渲染（react相关）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。