React 函数式组件 父子传值

parent.js

import React,{ useRef } from 'react'
import Child from './child'

function Parent(){
const childRef = useRef()

const props = {
	list : ['1', '2', '3'],
	getChildData: (data) => {
	    const nowList=['4', '5', '6']
	    // 父组件调用子组件的方法
		childRef.current.refreshFunc(nowList)
		}
	}
return (
	<div>
		<h6>父组件</h6>
		<Child ref={childRef} {...props} />
	</div>
	)
}

export default Parent;

child.js

import React,{ forwardRef, useImperativeHandle, useState } from 'react'

//通过forwardRef转发ref到DOM
const Child = forwardRef((props,ref)=>{
  	//使用useImperativeHandle自定义暴露给父组件的方法
	useImperativeHandle(ref,()=>({
	  refreshFunc
	 }))
	 
	 const [list, setList] = useState(props.list)
		
	 const sendToParent = (data) => {
	 	props.getChildData(data)
	 }
	 
	 // 暴露给父组件的方法
	 const refreshFunc = (data) =>{
		setList(data)
	 }
return (
	<div>
		<h6>子组件</h6>
		{
			list.map((item) => {
				return <div key = {item}>
					<span>{item}</span>
					<button onClick={() => sendToParent(item)}>传父</button>
				    </div>
			})
		}
	</div>
  )
})

return default Child;