React Hook Parent-child components call functions mutually
1. The child component calls the parent component function method
// Parent componentlet Father=()=>{
let getInfo=()=>{
}
return ()=>{
<div>
<Children
getInfo={getInfo}
/>
</div>
}
}//Subcomponentlet Children=(param)=>{
return ()=>{
<div>
<span onClick={}>Call parent component function</span>
</div>
}
}The child component calls the parent component function, which can pass parameters to the parent component and refresh the parent component information.
2. Parent component calls child component function method
// Parent component//UseRef needs to be introducedimport {useRef} from 'react'
let Father=()=>{
const childRef=useRef();
let onClick=()=>{
();
}
return ()=>{
<div>
<Children
ref={childRef}
/>
<span onClick={onClick}>Calling child component functions</span>
</div>
}
}//Subcomponent//UseImperativeHandle, forwardRef needs to be introducedimport {useImperativeHandle,forwardRef} from 'react'
let Children=(ref)=>{
useImperativeHandle(ref, () => ({
getInfo:()=>{
//Data to be processed }
}))
return ()=>{
<div></div>
}
}
Children = forwardRef(Children);useImperativeHandle needs to be used in conjunction with forwardRef, otherwise the following warning will appear
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use ()?
React Hook Parent-child component passes value
Our company's technology stack is react, and it uses pro out of the box. I am personally used to using functional components, so I use hooks more often. Now write an example of passing values of parent and child components, hoping it will help you.
Parent component
import React, { useState,createContext} from "react";
import Counter from './index1'
const myContext = createContext();
function App() {
const [count, setCount] = useState(0);
return (
<div>
<h4>I'm the parent component</h4>
<p>Clicked {count} Second-rate!</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click me
</button>
{/* Key code */}
{/* Provider */}
< value={count}>
<Counter myContext={myContext} />
</>
</div>
);
}
export default App;The child component uses useContext to get the context value passed by the parent component.
Subcomponents
import React, { useContext} from 'react';
// Key codefunction Counter({myContext}) {
const count = useContext(myContext); // Get the value passed by the parent component return (
<div>
<h4>I'm a child component</h4>
<p>This is the value passed by the parent component：{count}</p>
</div>
)
}
export default Counter;The above is personal experience. I hope you can give you a reference and I hope you can support me more.