对 React 父子组件通讯有点不解,求指教! - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
s609926202
V2EX    程序员

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

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

    问题:

    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     Solana     2528 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 23ms UTC 11:13 PVG 19:13 LAX 04:13 JFK 07:13
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86