H5W3
当前位置:H5W3 > JavaScript > React > 正文

【React】react父组件引用了子组件多次,怎么让传入子组件的props保持独立

假如我有这样一个组件

import React, {Component} from 'react';
class InputTest extends Component {
constructor(props) {
super(props);
this.state = {
fillok: true
};
}
render() {
return (
<input />
);
}
}
export default InputTest;

我在一个组件中引用了多次上面的组件

import React, {Component} from 'react';
class componentName extends Component {
render() {
return (
<div>
<InputTest {...this.state} />
<InputTest {...this.state} />
</div>
);
}
}
export default componentName;

我想知道在父组件中通过props的形式给组件传递state 怎么让子组件中获取的props是独立的,他们之间互不影响。

我在这里遇到的情况是,在其中一个InputTest组件中操作state会影响另外一个InputTeststate

另外再补充一个问题。this.setState的更新是异步的。父组件按照{…this.state}传入子组件的props难到拿到的值也是异步的么。(我的意思就是子组件通过props拿到的值是不是父组件已经更新完的值)?

回答

就算引用多次子组件,但是传给子组件的值也不是同一个吧?你这样是把父组件的所有state都传给了子组件,他们拿到的都是一样的东西,那显示出来能不是一样的吗 ? 就像一个函数,每次都是传递一样的参数进去,返回的不都是一样的吗?
想要不被影响那么

<InputTest {...this.state.a} />
<InputTest {...this.state.b} />

就是不能把同一个值传递进去

1.一种方式是在子组件的构造函数里把props用state缓存起来,这样的话会导致父组件的属性更新了,子组件没有更新,这个时候需要结合componentWillRecieveProps函数处理
2.把父组件传给子组件的属性分开,各个子组件的属性相互独立

本文地址:H5W3 » 【React】react父组件引用了子组件多次,怎么让传入子组件的props保持独立

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址