react函数组件父子组件传参

最新推荐文章于 2024-07-10 16:21:59 发布

原创最新推荐文章于 2024-07-10 16:21:59 发布 · 256 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了在React中，如何通过useState进行状态管理，以及父组件向子组件传递值（父传子）和子组件向父组件反馈信息（子传父）的过程，包括props的使用和事件驱动的值传递。

父组件页面

·先引入 useState

import React,{useState} from 'react'

再通过hooks声明的useState来在存放一个变量(name),setName来设置那么的值

const [name,setName] = useState('');

·在父组件标签上将要传给子组件的值绑定上

<Hearders name={name}  />

·在子组件页面

·子组件身上有个props，可以用来获取父组件传递的参数

通过解构 const {name}=props来获取

const {name}=props

export default function Home(props) {
const {name} =props
}

·通过事件传值给父组件

<button onClick={() => {submit(str)}}></button>

·子组件的props身上有setStr属性，可以通过它来给父组件传参

function menuFold(str){
   props.sendName(str)
}

·父组件接受

<Hearders str={str} sendStr={changeStr} />

`父组件使用

function changeStr(value){
//拿到了子组件传过来的值并使用
        setStr('又开学了..')

}