今天我们主要说下react函数式组件如何进行父组件向子组件传值。在开发过程中，为了提高可读性或者复用性，我们会进行组件的拆分。先说下，我们在引入子组件时，子组件的名字一定要大写，否则会报错（这是个babel编译机制问题）。那么，父组件在引入子组件后，如何传值呢？首先，父组件要将传递的参数写到子组件标签上，然后，子组件通过props接收父组件传过来的所有参数。具体看以下案例。

一、具体案例

案例主要实现一个简单的父组件Home向子组件Child传递count值，子组件通过props拿到此值并渲染出来。

父组件：home.tsx

import React, { useState } from 'react';
import './index.less';
import Child from './component/child';const Home: React.FC = () => {const [count, setCount] = useState<number>(0);return (<div className="home-wrap"><p>当前数字：{count}</p><buttononClick={() => {setCount(count + 1);}}>数字递增</button><Child count={count} /></div>);
};export default Home;

子组件：child.tsx

import React from 'react';type selfProps = {count: number;
};const Child: React.FC<selfProps> = (props) => {const { count } = props; //解构赋值return (<div className="child-wrap"><p>子组件</p><p>从父组件传下来的数字是：{count}</p></div>);
};export default Child;

二、效果展示

通过下图，我们可以发现，当我们点击按钮时，父组件的count（即数字）值会不断递增，子组件拿到父组件传递下来的count值也是同步变化的。

【关联文章】

react函数式组件传值之子传父https://blog.csdn.net/w544924116/article/details/119565219

感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！

我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。

react函数式组件传值之父传子相关推荐

vue-cli 组件传值：父传子props
组件怎么使用点这页,本页就直奔主题了啊一.基本传值: 1.在父组件的标签上定义属性,值就是你要传的数据,如下: 2.然后在子组件通过props属性接收传来的值,如下: 父传子的基本传值就完事啦看效 ...
react 三种通信方式（父传子、子传父、兄弟传值）
react有三种通信方式:一.父传子,二.字传父,三.兄弟之间传值一.父组件向子组件传值父组件通过属性的方式传递参数,子组件通过props来接收父组件传递过来的参数 React中是单向数据流,数据 ...
vue组件之间互相传值：父传子，子传父
vue组件之间互相传值:父传子,子传父为什么要用到组件间传值? 答:组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据,也不能直接将子组件的数据传到父组件里面 ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
Vue2组件间通信——父传子值props
Vue2组件间通信--父传子值props Vue2中组件间通信系列,本篇是关于父组件向子组件传值的介绍,这里我会用通俗的语言帮助大家理解props配置项功能: 子组件可以接收到父组件传递的数据信息, ...
Vue组件通信：父传子、子传父、跨组件通信
方法一:组件通信_父传子_props(属性绑定) 在进行组件通信之前,我们首先要明确父和子是谁,父传子=>在父中引入子(被引入的是子) 1. 父传子,要先在子组件内定义props变量,准备接收, ...
Vue3 - 组件通信（父传子）
前言在 Vue3 中,父组件向子组件传参的方法. 与 Vue2 相比,还是有一些区别的. 基础示例现在我们的需求是,要通过父组件,传递一个标题来让子组件显示. 子组件 Com.vue: <t ...
vue父组给子子组件传html,vue组件之间互相传值：父传子，子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂作笔记-vue 通常页面的视图App.vue应为这样一.父组件向子组件传值浏览器 1.建立子组件,在src/components/文件夹下新建一个C ...
自我总结篇之vue的组件通信（父传子子传父非父子）
一:父传子父组件代码如下: <template><div class="father"><child :message='message' :mes ...

react函数式组件传值之父传子

一、具体案例

二、效果展示

react函数式组件传值之父传子相关推荐

最新文章

热门文章