问题:
react 中传递给子组件的 props 是否都应该由父组件控制。
场景:
模板消息弹框子组件,定义了所有需要的 state ( sendName,reveiveName,content,...);
父组件调用子组件时,传递(不是一定的) content props 给子组件,子组件在 static getDerivedStateFromProps 中根据 content props 更新 content state。
问题:
子组件有必要定义这些 state 吗?还是都由父组件传递 props 进去;
子组件在 static getDerivedStateFromProps 中根据 content props 更新 content state 时,会导致子组件的 state 无法更新了,是我判断条件写的有问题,但是不知道怎么改进下:
static getDerivedStateFromProps(props, state) {
const { content } = props;
if (state.content !== content) {
return {
content,
};
} else {
return null;
}
}
还有其他场景,比如编辑时,我也是把编辑页面写成一个组件,在里边定义了所有的 state,父组件传递 props 进去后进行合并(不知道这样操作对不对),总感觉有点问题,但没有啥好的想法,接触 react 有点短。
求解惑,不胜感激。
1
ymyqwe 2019-05-17 11:04:12 +08:00
父子组件通信的,通过父组件传递 props 属性及方法给子组件,子组件通过 props 方法来修改父组件的 props,直接沿用 props 就行
子组件自己的属性,就通过子组件自己的 state 来维护就行了 |
2
hyyou2010 2019-05-17 11:13:00 +08:00
我并不精通,我肤浅的理解是,如果 props 发生改变,那么会自动引发 componentUpdate/render 等调用。所以,你这个手动的 static 拷贝方法放在哪里?会被自动调用吗?
|
3
s609926202 OP @hyyou2010 放在 class 中的,props 发生改变,子组件不会同步修改的。
|
4
shutongxinq 2019-05-17 11:35:19 +08:00 via iPhone
最好能用父组件维护就父组件维护。props 的意义就是让子组件能够在 props 变的时候自动重新渲染。你写的这个 getDerivedStateFromProps 没有必要
|
5
9tao 2019-05-17 11:45:25 +08:00
了解一下受控组件和非受控组件。看场景,子组件不定义 state,意味着它的状态只能由父组件决定,如果定义了 state,组件内部自治,将改变以事件的形式传递出去
|
6
hyyou2010 2019-05-17 11:48:54 +08:00
子组件有必要定义这些 state 吗?还是都由父组件传递 props 进去
---------我猜测,你的子组件需要一组业务变量,这组业务变量包括 内部 state,也包括 props 的某种计算值,是不是这样?我认为完全可以,只是需要留意 props 和 state 是怎样,以及何时被刷新的。 |
7
s609926202 OP @hyyou2010 相当于是我把编辑重新写了一个页面,把变量都传递到了子组件,然后子组件维护自己的 state,返回给父组件修改后的变量
|
8
leaveeel 2019-05-17 12:03:14 +08:00 via Android
1:如果子组件仅仅是获取 props 就没必要定义 state
2:如果子组件需要修改 props 看情况要不要 state。比如: 2.1:只有一个子组件或者修改了一个其他所有用到父 props 的兄弟组件都同步改变就不需要 state 2.2:如果父组件下有多个独立的组件同时引用 props,单独修改不能影响其他组件就要在子组件 state 里定义 key=props.key ,操作 state.key |
9
codegeek 2019-05-17 13:25:35 +08:00
直接从 props 获取,不用在子组定义,子组件只定义自己的 state
|
10
Caballarii 2019-05-17 13:38:31 +08:00
属性要么在 props 里,要么在 state 里,没必要把 props 复制给 state,都放父组件里用 props 传进来,修改的时候由父组件传一个修改父组件 state 的函数进来调用就行了
|