This is the third day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Write in front:

This series of code source code has been uploaded to Github, you can download at will, the video will be explained to help you more through!

Source address: jack-zhang-coming /react-demo-project: used to store some basic examples related to react; (github.com)

This article serves as a summary of my study, and I will share it with you. If you think these contents are useful to you, please give me a thumbs-up ~ thank you ~

Because the personal technology is limited, if there is any mistake or doubt, welcome to point out or give advice! Thank you very much!

Personal front-end blog site: zhangqiang.hk. Cn

Welcome to join the front-end learning QQ communication group of the blogger: 706947563, focus on the front-end development, learn and progress together!

In this series you will learn:

  • The parent component passes values and functions to the child component, where the child component can use the values and functions of the parent component. (Link for this chapter: juejin.cn/post/699147…)
  • The child component passes values and functions to the parent component, and the parent component uses the values and functions of the child component. (In this chapter)
  • A child component passes values and functions to a child component, which can use the values and functions of another child component.

The child component passes values and functions to the parent component, and the parent component uses the values and functions of the child component

  • With the new react hooks feature,useRef,useImperativeHandle,forwardRefTo implement.

useRef :

UseRef returns a mutable ref object whose.current property is initialized to the passed parameter (initialValue). The returned REF object persists throughout the lifetime of the component.

useImperativeHandle :

UseImperativeHandle lets you customize the instance value exposed to the parent component when using ref. In most cases, imperative code like ref should be avoided. UseImperativeHandle should be used with the forwardRef.

ForwardRef:

React. ForwardRef takes a render function as an argument. React will call this function with props and ref as arguments. This function should return the React node.

Parent component key code

import React, { useState, useRef, useEffect } from 'react'; import Child1 from './components/Child1/index'; import Child2 from './components/Child2/index'; Const App = () => {const [parentValue, setParentValue] = useState(' I am the parentValue -'); const [isChild2value, setIsChild2value] = useState(''); const Child2Ref = useRef(null); UseEffect (() => {setIsChild2value(Child2Ref? .current? .areGetChild2Value()); }, []) return ( <div style={{ width: '60%', margin: '0 auto', textAlign: 'center', border: < span style={{margin: 0.0px; padding: 0.0px; padding: 0.0px; }} onClick={() => {setParentValue(' I triggered the parent function, '+ parentValue); < img style={{display: 'flex', contyContent: 'center', contyContent: 'center', justify: 'center', contycontent: 'center', justify: 'center', contycontent: 'center', justify: '20px 0' }}> <div style={{ display: 'flex', justifyContent: 'center', alignContent: 'center', width: '50%', margin: '0' }}> <button onClick={() => { Child2Ref? .current? .areSetChild2Value(); setTimeout(() => { setIsChild2value(Child2Ref? .current? .areGetChild2Value()); }, 100); <div style={{display: 'flex', contyContent: invalid}} > <div style={{display: 'flex', contyContent: invalid}} > 'center', alignContent: 'center', width: '50%', margin: <p> The parent component displays the content of the child component 2: {isChild2value}</p> </div> </div> <Child1 parentValue={parentValue} setParentValue={setParentValue}></Child1> <Child2 ref={Child2Ref}></Child2> </div> ); } export default App;Copy the code

Child component key code

import React, { useState, useImperativeHandle, forwardRef } from 'react'; Const Child2 = (props, ref) => {const [child2Value, setChild2Value] = useState(' prop, prop ') useImperativeHandle(ref, prop, prop) () => {return {child2Value, // the object is short for child2Value: child2Value, areGetChild2Value: () => {return child2Value}, areSetChild2Value: () => {setChild2Value(child2Value + 'child component 2 value - changed! ') } } }) return ( <> <div style={{ width: '60%', margin: '30px auto', padding: '30px 5px', textAlign: 'center', border: </div> <div style={{margin: 0.0px 0.0px 0.0px; margin: 0.0px 0.0px 0.0px 0.0px; '20px 0'}} onClick={() => {setChild2Value(child2Value + 'child component 2 value - changed! '); </div> </>)} export default forwardRef(Child2);Copy the code

Thanks for watching!