对 React 父子组件通讯有点不解,求指教!

2019-05-17 10:41:51 +08:00
 s609926202

问题:

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 有点短。

求解惑,不胜感激。

2189 次点击
所在节点    程序员
10 条回复
ymyqwe
2019-05-17 11:04:12 +08:00
父子组件通信的,通过父组件传递 props 属性及方法给子组件,子组件通过 props 方法来修改父组件的 props,直接沿用 props 就行
子组件自己的属性,就通过子组件自己的 state 来维护就行了
hyyou2010
2019-05-17 11:13:00 +08:00
我并不精通,我肤浅的理解是,如果 props 发生改变,那么会自动引发 componentUpdate/render 等调用。所以,你这个手动的 static 拷贝方法放在哪里?会被自动调用吗?
s609926202
2019-05-17 11:32:39 +08:00
@hyyou2010 放在 class 中的,props 发生改变,子组件不会同步修改的。
shutongxinq
2019-05-17 11:35:19 +08:00
最好能用父组件维护就父组件维护。props 的意义就是让子组件能够在 props 变的时候自动重新渲染。你写的这个 getDerivedStateFromProps 没有必要
9tao
2019-05-17 11:45:25 +08:00
了解一下受控组件和非受控组件。看场景,子组件不定义 state,意味着它的状态只能由父组件决定,如果定义了 state,组件内部自治,将改变以事件的形式传递出去
hyyou2010
2019-05-17 11:48:54 +08:00
子组件有必要定义这些 state 吗?还是都由父组件传递 props 进去
---------我猜测,你的子组件需要一组业务变量,这组业务变量包括 内部 state,也包括 props 的某种计算值,是不是这样?我认为完全可以,只是需要留意 props 和 state 是怎样,以及何时被刷新的。
s609926202
2019-05-17 12:01:47 +08:00
@hyyou2010 相当于是我把编辑重新写了一个页面,把变量都传递到了子组件,然后子组件维护自己的 state,返回给父组件修改后的变量
leaveeel
2019-05-17 12:03:14 +08:00
1:如果子组件仅仅是获取 props 就没必要定义 state

2:如果子组件需要修改 props 看情况要不要 state。比如:
2.1:只有一个子组件或者修改了一个其他所有用到父 props 的兄弟组件都同步改变就不需要 state
2.2:如果父组件下有多个独立的组件同时引用 props,单独修改不能影响其他组件就要在子组件 state 里定义 key=props.key ,操作 state.key
codegeek
2019-05-17 13:25:35 +08:00
直接从 props 获取,不用在子组定义,子组件只定义自己的 state
Caballarii
2019-05-17 13:38:31 +08:00
属性要么在 props 里,要么在 state 里,没必要把 props 复制给 state,都放父组件里用 props 传进来,修改的时候由父组件传一个修改父组件 state 的函数进来调用就行了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/564959

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX