React 父子组件通信

Posted 2023-04-27

参考技术A

父子组件通信分为【父组件给子组件传值】、【父组件获取子组件的值】两类。

父组件 Parent 引入子组件 Children ，并把 title 传递给子组件

子组件根据 props 获取父组件传过来的数据

父组件把 clearMsg 方法传递给子组件

子组件根据 props 获取父组件传过来的方法 clearMsg ，并在点击按钮的时候执行了父组件清空 msg 的方法

父组件把 this 传递给子组件

子组件根据 props 获取父组件传过来的父组件，并在点击按钮的时候获取了父组件的数据和执行了父组件清空 msg 的方法

父组件方法打印出子组件的 msg

子组件把 msg 传递给父组件的方法

父组件根据ref获取整个子组件，并获取到组件的所有数据和方法。
这里注意父组件用了 React 生命周期中 componentDidMount 方法，该方法是在页面渲染完成之后执行的方法。

------------更新start---------------
请注意： this.refs 这种方法已被废弃，如果你项目中还这么用，请尽快更改他，最新的用法如下：
参考链接： https://reactjs.org/docs/refs-and-the-dom.html

------------更新end---------------
子组件把 msg 传递给父组件的方法

tips: 上交流可能会看不到消息，如有问题，欢迎进群交流50063010

END---------------

[react] react父子组件如何通信？

[react] react父子组件如何通信？

props

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题