V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
s609926202
V2EX  ›  程序员

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

  •  
  •   s609926202 ·
    shangdev · 2019-05-17 10:41:51 +08:00 · 2172 次点击
    这是一个创建于 2019 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题:

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

    求解惑,不胜感激。

    10 条回复    2019-05-17 13:38:31 +08:00
    ymyqwe
        1
    ymyqwe  
       2019-05-17 11:04:12 +08:00
    父子组件通信的,通过父组件传递 props 属性及方法给子组件,子组件通过 props 方法来修改父组件的 props,直接沿用 props 就行
    子组件自己的属性,就通过子组件自己的 state 来维护就行了
    hyyou2010
        2
    hyyou2010  
       2019-05-17 11:13:00 +08:00
    我并不精通,我肤浅的理解是,如果 props 发生改变,那么会自动引发 componentUpdate/render 等调用。所以,你这个手动的 static 拷贝方法放在哪里?会被自动调用吗?
    s609926202
        3
    s609926202  
    OP
       2019-05-17 11:32:39 +08:00 via iPhone
    @hyyou2010 放在 class 中的,props 发生改变,子组件不会同步修改的。
    shutongxinq
        4
    shutongxinq  
       2019-05-17 11:35:19 +08:00 via iPhone
    最好能用父组件维护就父组件维护。props 的意义就是让子组件能够在 props 变的时候自动重新渲染。你写的这个 getDerivedStateFromProps 没有必要
    9tao
        5
    9tao  
       2019-05-17 11:45:25 +08:00
    了解一下受控组件和非受控组件。看场景,子组件不定义 state,意味着它的状态只能由父组件决定,如果定义了 state,组件内部自治,将改变以事件的形式传递出去
    hyyou2010
        6
    hyyou2010  
       2019-05-17 11:48:54 +08:00
    子组件有必要定义这些 state 吗?还是都由父组件传递 props 进去
    ---------我猜测,你的子组件需要一组业务变量,这组业务变量包括 内部 state,也包括 props 的某种计算值,是不是这样?我认为完全可以,只是需要留意 props 和 state 是怎样,以及何时被刷新的。
    s609926202
        7
    s609926202  
    OP
       2019-05-17 12:01:47 +08:00 via iPhone
    @hyyou2010 相当于是我把编辑重新写了一个页面,把变量都传递到了子组件,然后子组件维护自己的 state,返回给父组件修改后的变量
    leaveeel
        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
    codegeek
        9
    codegeek  
       2019-05-17 13:25:35 +08:00
    直接从 props 获取,不用在子组定义,子组件只定义自己的 state
    Caballarii
        10
    Caballarii  
       2019-05-17 13:38:31 +08:00
    属性要么在 props 里,要么在 state 里,没必要把 props 复制给 state,都放父组件里用 props 传进来,修改的时候由父组件传一个修改父组件 state 的函数进来调用就行了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5614 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 07:41 · PVG 15:41 · LAX 23:41 · JFK 02:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.