溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

react父子組件指的是什么

發(fā)布時(shí)間：2022-07-14 09:39:11 來源：億速云 閱讀：324 作者：iii 欄目：web開發(fā)

這篇文章主要介紹了react父子組件指的是什么的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇react父子組件指的是什么文章都會有所收獲，下面我們一起來看看吧。

在react組件的相互調(diào)用中，把調(diào)用者稱為父組件，被調(diào)用者稱為子組件。父子組件間可以傳值：1、父組件向子組件傳值時(shí)，先將需要傳遞的值傳遞給子組件，然后在子組件中，使用props來接收父組件傳遞過來的值；2、子組件向父組件傳值時(shí)，需要通過觸發(fā)方法來傳遞給父組件。

react父子組件指的是什么

本教程操作環(huán)境：Windows7系統(tǒng)、react18版、Dell G3電腦。

一、React中的組件

react組件就是自己定義的非html標(biāo)簽，規(guī)定react組件首字母大寫：

class App extends Component{
}

<App />

react父子組件指的是什么

二、父子組件

組件的相互調(diào)用中，把調(diào)用者稱為父組件，被調(diào)用者稱為子組件：

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 />
            </div>
        )
    }
}

export default Up;
import React from 'react';

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

        return (
            <div>
                Children
            </div>
        )
    }
}

export default Children;

三、父組件給子組件傳值

父組件向子組件傳值使用props。父組件向子組件傳值時(shí)，先將需要傳遞的值傳遞給子組件，然后在子組件中，使用props來接收父組件傳遞過來的值。

父組件在調(diào)用子組件的時(shí)候定義一個(gè)屬性：

<Children msg="父組件傳值給子組件" />

這個(gè)值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 (
            <div>
                Children
                <br />
                {this.props.msg}
            </div>
        )
    }
}

export default Children;

react父子組件指的是什么

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

export default Up;
import React from 'react';

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

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

        return (
            <div>
                Children
                <br />
                <button onClick={this.run}>Run</button>
            </div>
        )
    }
}

export default Children;

react父子組件指的是什么

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 (
            <div>
                Children
                <br />
                <button onClick={this.run}>Run</button>
            </div>
        )
    }
}

export default Children;

react父子組件指的是什么

四、子組件給父組件傳值

子組件向父組件傳值通過觸發(fā)方法來傳值

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

export default Up;
import React from 'react';

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

        return (
            <div>
                Children
                <br />
                <button onClick={() => {this.props.upFun("子組件數(shù)據(jù)")}}>Run</button>
            </div>
        )
    }
}

export default Children;

react父子組件指的是什么

五、父組件中通過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(
            <div>
                up
                <Children ref="children" msg="test"/>
                <button onClick={this.clickButton}>click</button>
            </div>
        )
    }
}

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

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

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

        return (
            <div>
                Children
                <br />
            </div>
        )
    }
}

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)

關(guān)于“react父子組件指的是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“react父子組件指的是什么”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手