React parent components communicate with each otherThe parent componentPass the value and the function toChild components| August more challenges

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.
  • The child component passes values and functions to the parent component, and the parent component uses the values and functions of the child component.
  • A child component passes values and functions to a child component, which can use the values and functions of another child component.

The parent componentPass the value and the function toChild componentsIn which the child component can use the values and functions of the parent component

  • React props (props)

Parent component key code

import React, { useState } from 'react'; import Child1 from './components/Child1/index'; Const App = () => {const [parentValue, setParentValue] = useState(' I am the parentValue -'); 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); </button> <Child1 parentValue={parentValue} setParentValue={setParentValue}></Child1> </div>); } export default App;Copy the code

Child component key code

import React, { useState } from 'react'; const Child1 = (props) => { return ( <> <div style={{ width: '60%', margin: '30px auto', padding: '30px 5px', textAlign: 'center', border: </div> <div style={{margin-bottom: 0px; margin-bottom: 0px; margin-bottom: 0px; margin-bottom: 0px; }} onClick={() => {props. SetParentValue (' props. </button> </div> </>); export default Child1;Copy the code

Thanks for watching!

The latter two methods will be updated as soon as possible!