react父子组件传值

时间：2019-01-25 18:46:25 阅读：188 评论：0 收藏：0 [点我收藏+]

标签：com end alt 9.png str tst react alert inf

react均是以组件构成，那父子组件传值就很重要了

父组件传值给子组件，不仅可以传值，传事件，还可以传实例

1、父组件传值给子组件

传值

父组件：

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

class Father extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            msg:‘父组件的msg‘
        };
    } 
    render() {
        return (
            <div>
                <div>我是父组件</div>
                <Children msg={this.state.msg}/>
            </div>
        );
    }
}

export default Father;

子组件：

import React from ‘react‘;

class Children extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            msg:‘子组件‘
        };
    } 
    render() {
        return (
            <div>
                <div>子组件</div>
                <div>{this.props.msg}</div>
            </div>
        );
    }
}

export default Children;

效果如下：

技术分享图片

传事件：

父组件：

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

class Father extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            msg:‘父组件的msg‘
        };
    } 
    run=()=>{
        alert(‘给子组件获取事件‘)
    }
    render() {
        return (
            <div>
                <div>我是父组件</div>
                <Children msg={this.run}/>
            </div>
        );
    }
}

export default Father;

子组件：

import React from ‘react‘;

class Children extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            msg:‘子组件‘
        };
    } 
    render() {
        return (
            <div>
                <div>子组件</div>
                <div>{this.state.msg}</div>
                <button onClick={this.props.msg}>获取父组件的事件</button>
            </div>
        );
    }
}

export default Children;

效果如下：

技术分享图片

获取父组件的整个实例

父组件：

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

class Father extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            msg:‘父组件的msg‘
        };
    } 
    run=()=>{
        alert(‘给子组件获取事件‘)
    }
    render() {
        return (
            <div>
                <div>我是父组件</div>
                <Children msg={this}/>
            </div>
        );
    }
}

export default Father;

子组件：

import React from ‘react‘;

class Children extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            msg:‘子组件‘
        };
    } 
    render() {
        return (
            <div>
                <div>子组件</div>
                <div>{this.state.msg}</div>
                <div>获取父组件的值{this.props.msg.state.msg}</div>
                <button onClick={this.props.msg.run}>获取父组件的事件</button>
            </div>
        );
    }
}

export default Children;

效果如下：

技术分享图片

2、子组件传值给父组件，通过ref传值

父组件：

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

class Father extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            msg:‘父组件的msg‘
        };
    }  
    getData=()=>{
        this.setState({
            msg:this.refs.children.state.msg
        })
    }
    render() {
        return (
            <div>
                <div>我是父组件</div>
                <div>{this.state.msg}</div>
                <Children ref=‘children‘/>
                <button onClick={this.getData}>获取子组件</button>
            </div>
        );
    }
}

export default Father;

子组件：

import React from ‘react‘;

class Children extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            msg:‘子组件‘
        };
    } 
    render() {
        return (
            <div>
                <div>子组件</div>
            </div>
        );
    }
}

export default Children;

效果如下：

技术分享图片

react父子组件传值

标签：com end alt 9.png str tst react alert inf

原文地址：https://www.cnblogs.com/zdping/p/10320964.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行