react 父子传值_react hooks 父子组件如何传值

1.父组件传值给子组件

React-Hooks 使用useContext进行父子组件传值，具体操作如下

1.父组件代码

import React, { useState } from 'react';
import Child from './child.js'；//子组件
import myContextContext from './createContext' ; //公共组件
const Example= (props) =>{
const [count , setCount ] = useState(0)
return(
<div>
<div>
<p>you click {count} times</p>
<button onClick={()=>{setCount(count+1)}}>click me</button>
<myContextContext .Provider value ={count}>
<Child/>
</myContextContext .Provider>
</div>
</div>
)
}
export default Example

2.子组件代码

import React, { useContext } from 'react';
import myContextContext from './createContext';
const Child= () =>{

const count= useContext(myContextContext ); // 得到父组件传的值
return(<h2>{count}</h2>)
}
export default Child

3.公共组件createContext.js文件代码

import { createContext } from "react";
const myContextContext = createContext(null);
export default myContextContext ;

2.子组件给父组件传值

1.子组件代码

子组件通过点击之后把需要的值通过setCount 方法传到父组件里面

import React, { useContext } from 'react';

const Child= (props) =>{

const { setCount } = props;

return(

<Button onClick={()=>setCount (1)}>注册</Button>

)

}

export default Child

2.父组件代码

父组件监听到子组件的变化去改变对应的值

import React, { useState } from 'react';
import Child from './child.js'
const Example= (props) =>{
const [count , setCount ] = useState(0)

return(
<div>
<div>
<Child counts={count } setCount={setCount}/>
</div>
</div>
)
}
export default Example