What are parent-child components in react

In the mutual calling of react components, the caller is called the parent component and the callee is called the child component. Values can be passed between parent and child components: 1. When a parent component passes a value to a child component, the value to be passed is first passed to the child component, and then in the child component, props are used to receive the value passed by the parent component; 2. Child component When passing values to the parent component, you need to pass them to the parent component through the trigger method.

#The operating environment of this tutorial: Windows7 system, react18 version, Dell G3 computer.

1. Components in React

The react component is a self-defined non-html tag. It is stipulated that the first letter of the react componentis capitalized:

class App extends Component{ } 

2. Parent-child components

In the mutual calling of components, thecalleris called the parent component, and thecalleeCalled a subcomponent:

import React from 'react'; import Children from './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } render(){ console.log("render"); return( 
 up  
 ) } } export default Up;

import React from 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { } } render(){ return ( 
 Children 
 ) } } export default Children;

3. Parent component passes value to subcomponent

Parent component passes value to subcomponent using props. When a parent component passes a value to a child component, the value to be passed is first passed to the child component, and then in the child component, props are used to receive the value passed by the parent component.

The parent component defines a property when calling the child component:

This valuemsgwill be bound to thepropsproperty of the child component , subcomponents can be used directly:

this.props.msg

The parent component can pass values and methods to the component, and can even pass itself to the subcomponent

3.1 Passing values

import React from 'react'; import Children from './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } render(){ console.log("render"); return( 
 up  
 ) } } export default Up;

import React from 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { } } render(){ return ( 
 Children 
 {this.props.msg} 
 ) } } export default Children;

3.2 Pass method

import React from 'react'; import Children from './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } run = () => { console.log("父组件run方法"); } render(){ console.log("render"); return(
       

        up 
       
) } } export default Up;

import React from 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { } } run = () => { this.props.run(); } render(){ return ( 
 Children 
 Run 
 ) } } export default Children;

##3.3 Pass parent component to child component

import React from 'react'; import Children from './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } run = () => { console.log("父组件run方法"); } render(){ console.log("render"); return( 
 up  
 ) } } export default Up;

import React from 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { } } run = () => { console.log(this.props.msg); } render(){ return ( 
 Children 
 Run 
 ) } } export default Children;

4. The child component passes the value to the parent component

The child component passes the value to the parent component through the trigger method To pass the value

import React from 'react'; import Children from './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } getChildrenData = (data) => { console.log(data); } render(){ console.log("render"); return(
       

        up 
       
) } } export default Up;

import React from 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { } } render(){ return ( 
 Children 
  {this.props.upFun("子组件数据")}}>Run 
 ) } } export default Children;

5. Obtain the child component properties and methods through refs in the parent component

import React from 'react'; import Children from './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } clickButton = () => { console.log(this.refs.children); } render(){ console.log("render"); return(
        

         up 
         click
        
) } } export default Up; ``` ```js import React from 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { title: "子组件" } } runChildren = () => { } render(){ return (
        

         Children
         

        
) } } export default Children; ``` ![What are parent-child components in react](https://img-blog.csdnimg.cn/20200722065137748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldGlhbnhm,size_16,color_FFFFFF,t_70)

[Related recommendations:

Redis video tutorial】

The above is the detailed content of What are parent-child components in react. For more information, please follow other related articles on the PHP Chinese website!