Detailed explanation of how to pass values ​​between react hooks components (using ts)

From father to son

Pass values ​​through props and use useState to control the state value

In the parent component Father.tsx:

In the child component Child.tsx:

Display effect:

From son to father

Just like react, the callback function is passed into the child component, and the state of the parent component is updated by receiving the return value of the child component.

Parent component, in Father.tsx:

Child component, in Child.tsx:

Display effect:

Optimized version of child-to-parent transmission, using useCallback to store functions that handle events

Parent component, in Father.tsx:

Child component, in Child.tsx:

Cross-level components (parent to descendant)

Use useContext to pass values, similar to React's Context

Steps:

Create a context and use context.provider to associate the component that needs to pass the value to introduce context, and useContext to get the value

Parent component, in Father.tsx:

Child component, in Child.tsx:

Grandchild component, in Sun.tsx:

Display effect

This concludes this article on how to pass values ​​between react hooks components (using ts). For more information about passing values ​​between react hooks components, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!