react函数式组件父子组件之间传参

1.父组件传参给子组件

在父组件页面

·引入react身上的useState

import React,{useState} from 'react'

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

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

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

<Hearders name={name}  />

·在子组建页面

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

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

const {name}=props可以写成const name=props.name

export default function Home(props) {

    const {name} =props
}

2.子组件传参给父组件

·通过事件传值给父组件

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

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

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

·父组件接受

<Hearders name={name} sendName={changeName} />

`父组件使用

function changeName(value){
//拿到了子组件传过来的值并使用
		setName('柒月北辰')
	}