前言

自从react官方引入了hook，很多小伙伴都从老的class组件换为hook组件，但因为hook组件的传参和class组件传参还是有些区别的，所以下文汇总了4种传参方式

一、父传子

子组件通过props接收父组件传来的数据

1、父组件

import React, { useState } from 'react'import ChildrenCom from './child'// 父组件
const ParentCom = () => {const [name] = useState('A.Liang')return (<div><h2>父组件</h2><ChildrenCom name={name} /></div>)
}export default ParentCom

2、子组件

import React, { useState } from 'react'import ChildrenCom from './child'// 父组件
import React, { useEffect } from 'react'// 子组件
const ChildrenCom = props => {const { name } = propsuseEffect(() => {console.log('props==>', props)})return (<div><h4>子组件: </h4><p>父传给子组件的name: {name}</p></div>)
}export default ChildrenCom

---

二、子传父

父组件props传递回调函数给子组件

如果子组件想向父组件传递某些值，或者是子组件在执行某一段逻辑后想执行父组件中的某一段逻辑，此时可以在父组件中写好对应的逻辑函数，通过props传递这个函数给子组件进行调用即可

1、父组件

import React, { useState } from 'react'import Child from './child'
// 父组件
const ParentCom = () => {const [count, setCount] = useState(0)// 获取子组件传过来的value值并设置到count，val参数就是子组件的value值const getChildrenValue = val => {setCount(val)}return (<div><h2>父组件</h2><p>获取子组件传过来的值：{count}</p>{/* 这里是重要代码，向子组件传递getValue这个prop，它的值是一个回调函数 */}<Child getValue={getChildrenValue} /></div>)
}export default ParentCom

2、子组件

import React, { useState } from 'react'// 子组件
const ChildrenCom = props => {const [value, setValue] = useState(0)const addValue = () => {setValue(value + 1)// 向父组件传递每次递增的value值props.getValue(value + 1)}return (<div><h4>子组件</h4><button onClick={addValue}>点击改变子组件的value值：{value}</button></div>)
}export default ChildrenCom

---

三、父传后代

使用useContext 实现跨组件传值

const value = useContext(MyContext);

useContext接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

1、context.js

import { createContext } from 'react'const myContext = createContext(null)export default myContext

2、父组件

import React, { useReducer } from 'react'import myContext from './createContext'
import Child from './child'const reducer = (state, action) => {const [type, payload] = actionswitch (type) {case 'set':return {...state,...payload,}default:return {...state,...payload,}}
}const initData = {name: 'A.Liang',
}const ParentCom = () => {const [state, dispatch] = useReducer(reducer, initData)return (<div style={{ backgroundColor: '#f2f2f2' }}><h1>Test最顶层组件----实现跨组件间传值。</h1><buttononClick={() => {dispatch(['set', { name: '父组件改变了名字' }])}}>点我修改name</button><br />父组件-name：{state.name}<hr /><myContext.Providervalue={{name: state.name,// 把最顶层Test组件的dispatch传递下去给后代组件，这样后代组件就都能修改最顶层组件的数据了。proDispatch: dispatch,}}>{/* 子组件 */}<Child /></myContext.Provider></div>)
}export default ParentCom

3、子组件

import React, { useContext } from 'react'import myContext from './createContext'
import ChildChild from './child-child'// 子组件
const ChildrenCom = () => {const { name, proDispatch } = useContext(myContext)function changeName() {proDispatch(['set',{name: '子组件修改了名字',},])}return (<div><h4>子组件: </h4><button onClick={changeName}>子组件修改父组件的name</button><p>父传给子组件的name: {name}</p><ChildChild /><hr /></div>)
}export default ChildrenCom

4、子孙组件

import React, { useContext } from 'react'import myContext from './createContext'// 子孙组件
const ChildrenCom = () => {const { name, proDispatch } = useContext(myContext)function changeName() {proDispatch(['set',{name: '子孙组件修改了名字',},])}return (<div><h4>子孙组件: </h4><button onClick={changeName}>子孙组件修改父组件的name</button><p>父传给子孙组件的name: {name}</p><hr /></div>)
}export default ChildrenCom

---

四、父调用子的函数

如果想在父组件中调用子组件的某个函数，或者是使用子组件的某个值，可以使用这个方式（尽量少用）

react官网的一段文字描述：
useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用

1、父组件

import React, { useRef } from 'react'import ChildrenCom from './child'// 父组件
const ParentCom = () => {// 获取子组件实例const childRef = useRef()// 调用子组件的onChange方法const onClickChange = () => {childRef.current.onChange()}return (<div><h2>父组件</h2><button onClick={onClickChange}>点击调用子组件onChange函数</button><ChildrenCom ref={childRef} demonName="demo1" /></div>)
}export default ParentCom

2、子组件

import React, {useState,useEffect,useImperativeHandle,forwardRef,
} from 'react'// 子组件
const ChildrenCom = forwardRef((props, ref) => {const [value, setValue] = useState(0)const [name, setName] = useState('A.Liang')const { demonName } = propsuseEffect(() => {console.log('ref==>', ref)})// 自定义暴露给父组件的实例值 (useImperativeHandle 要配合 forwardRef使用)useImperativeHandle(ref, () => ({// 暴露函数给父组件调用onChange,// 也可以暴露子组件的状态值给父组件使用}))const onChange = () => {setValue(value + 1)setName(name === 'A.Liang' ? 'simon' : 'A.Liang')}return (<div><h4>子组件: {demonName}</h4><p>子组件的value: {value}</p><p>子组件的name: {name}</p><button onClick={onChange}>点击改变value和name</button></div>)
})export default ChildrenCom

---

代码下载(*p-hook**分支)：https://gitee.com/staraliang/react17-app/tree/p-hook/

觉得本文写的不错的，希望点赞、收藏、加关注，每月不定期更新干货哦，谢谢您嘞！

你可能感兴趣的文章：

• react router路由跳转传参，react-router-dom基本使用+4种传参方式