react中什么是父子组件

在react组件的相互调用中，把调用者称为父组件，被调用者称为子组件。父子组件间可以传值：1、父组件向子组件传值时，先将需要传递的值传递给子组件，然后在子组件中，使用props来接收父组件传递过来的值；2、子组件向父组件传值时，需要通过触发方法来传递给父组件。

本教程操作环境：Windows7系统、react18版、Dell G3电脑。

一、React中的组件

react组件就是自己定义的非html标签，规定react组件首字母大写：

class App extends Component{
}

3efbfcf616b81c5b71826e3d65d503c4

二、父子组件

组件的相互调用中，把调用者称为父组件，被调用者称为子组件：

import React from 'react';
import Children from './Children';

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    

    render(){
        console.log("render");
        return(
            dc6dce4a544fdca2df29d5ac0ea9906b
                up
                fbcbeebb0d4eb5f8bb2ddf5217cb012e
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Up;

import React from 'react';

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    
    render(){

        return (
            dc6dce4a544fdca2df29d5ac0ea9906b
                Children
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Children;

三、父组件给子组件传值

父组件向子组件传值使用props。父组件向子组件传值时，先将需要传递的值传递给子组件，然后在子组件中，使用props来接收父组件传递过来的值。

父组件在调用子组件的时候定义一个属性：

d3f08141287940ebfc9442c4aec88c90

这个值msg会绑定在子组件的props属性上，子组件可以直接使用：

this.props.msg

父组件可以给组件传值，传方法，甚至可以把自己传递给子组件

3.1 传值

import React from 'react';
import Children from './Children';

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children msg="父组件传值给子组件" />
            </div>
        )
    }
}

export default Up;

import React from 'react';

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    
    render(){

        return (
            dc6dce4a544fdca2df29d5ac0ea9906b
                Children
                ff9d32c555bb1d9133a29eb4371c1213
                {this.props.msg}
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Children;

3.2 传方法

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(
            dc6dce4a544fdca2df29d5ac0ea9906b
                up
                97ab908bfc79400d0f64f5c7a84a8ba8
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Up;

import React from 'react';

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }

    run = () => {
        this.props.run();
    }
    
    render(){

        return (
            dc6dce4a544fdca2df29d5ac0ea9906b
                Children
                ff9d32c555bb1d9133a29eb4371c1213
                c3f57f6e4c607f8d6647fd5664be10afRun65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Children;

3.3 将父组件传给子组件

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(
            <div>
                up
                <Children msg={this}/>
            </div>
        )
    }
}

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 (
            dc6dce4a544fdca2df29d5ac0ea9906b
                Children
                ff9d32c555bb1d9133a29eb4371c1213
                c3f57f6e4c607f8d6647fd5664be10afRun65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Children;

四、子组件给父组件传值

子组件向父组件传值通过触发方法来传值

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(
            dc6dce4a544fdca2df29d5ac0ea9906b
                up
                effbaf16810eb35d7afd6d6592a07d0e
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Up;

import React from 'react';

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    
    render(){

        return (
            dc6dce4a544fdca2df29d5ac0ea9906b
                Children
                ff9d32c555bb1d9133a29eb4371c1213
                2b44e232ce3e1f1d5ad375a5897ba70b {this.props.upFun("子组件数据")}}>Run65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Children;

五、父组件中通过refs获取子组件属性和方法

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(
            dc6dce4a544fdca2df29d5ac0ea9906b
                up
                c34af91a11911c4f403df396455b85c7
                49a63328f789f6d04321f9481ce5a90eclick65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Up;
```
```js
import React from 'react';

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            title: "子组件"
        }
    }

    runChildren = () => {
        
    }
    
    render(){

        return (
            dc6dce4a544fdca2df29d5ac0ea9906b
                Children
                ff9d32c555bb1d9133a29eb4371c1213
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Children;
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200722065137748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldGlhbnhm,size_16,color_FFFFFF,t_70)

【相关推荐：Redis视频教程】

以上是react中什么是父子组件的详细内容。更多信息请关注PHP中文网其他相关文章！