浅述React组件传值(看懂这一张图就够了)

简介: 浅述React组件传值(看懂这一张图就够了)

 

绿色箭头为调用子组件


所有的内容通过props做为桥梁接收


红色箭头为父传子:


在调用子组件上设置自定义属性,子组件通过自定义属性拿到父组件传过来的值,父组件将值存储到item,子组件通过props.item拿到父组件传过来的值。


黄色箭头为子传父:


通过父组件定义的自定义属性fn,子组件调用父组件的fn方法,通过回调函数 props.fn(值1,值2),回传给父组件,父组件拿到之后可以对数据进行操作。

目录
相关文章
|
3月前
|
前端开发 API
react怎么实现父子组件传值?
react怎么实现父子组件传值?
18 1
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
90 0
|
3月前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
58 0
|
3月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
37 1
|
3月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
100 1
|
3月前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
|
3月前
|
缓存 前端开发 API
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
|
3月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
40 0
|
3月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
3月前
|
资源调度 前端开发 JavaScript
React组件
React组件
51 0