明明两次返回的组件中的props不一致，为什么dom不重新渲染（react相关）

主要问题是 父组件通过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相关）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。