react 父子组件之间的传值

最近在做公司的项目用到了组件之间的传值，父子组件之间，兄弟组件之间的。今天有空就总结了一下，先记录下父子组件之间的传值。

效果图

页面其实很见到，为了演示效果，没做修饰。也是效果图

count是父组件的state的一个属性；
加按钮是父组件中的一个按钮；
间按钮是子组件的一个按钮；

父组件往子组件传值

父组件代码：

import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from 'antd';
import http from '../../assets/js/http'
import Sub1 from './sub1'

class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0,
            num: 0
        }
    }
    // 加按钮 点击事件
    addBtnClick(){
        let count = this.state.count;
        count ++;
        this.setState({
            count: count
        })
    }
    // 获取IP
    async getMyIP(){
        let baseUrl = "https://api.apiopen.top/EmailSearch";
        let params = {
            number: '1012002'
        }
        var data = await http.get(baseUrl,params);
    }
    render() {
        return (
            <div className='home'>
                <Link to="/detail">Home</Link>
                我是首页
                <div>count的值: {this.state.count}</div>
                <Button onClick={this.addBtnClick.bind(this)} type="primary">加按钮</Button>
                <Sub1 count={this.state.count}></Sub1>
            </div>
        );
    }
    componentDidMount() {
        this.getMyIP();
    }
}

export default Home;

通过改变父组件的state，子组件props接收。
子组件代码：

import React from 'react';
import { Button } from 'antd';

class Sub1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            num: 100
        }
    }
    // 减按钮 点击事件
    reduceBtnClick(){
        let num = this.state.num;
        num = num - 1;
        if (num <= 0) {
            num = 100;
        }
        this.setState({
            num: num 
        })
    }

    render() {
        return (
            <div className='sub1'>
                我是Home组件的子组件,接收到的父组件的数据：{this.props.count}
                <div>
                <Button onClick={this.reduceBtnClick.bind(this)}>减按钮{this.state.num}</Button>
                </div>
            </div>
        );
    }
    componentDidMount() {

    }
}

export default Sub1;

子组件往父组件传值

父组件代码：

import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from 'antd';
import http from '../../assets/js/http'
import Sub1 from './sub1'

class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0,
            num: 0
        }
    }
    // 加按钮 点击事件
    addBtnClick(){
        let count = this.state.count;
        count ++;
        this.setState({
            count: count
        })
    }
    // 子组件事件回调
    reduceBtnClickCallBack(num){
        this.setState({
            num: num
        })
    }

    // 获取IP
    async getMyIP(){
        let baseUrl = "https://api.apiopen.top/EmailSearch";
        let params = {
            number: '1012002'
        }
        var data = await http.get(baseUrl,params);
    }
    render() {
        return (
            <div className='home'>
                <Link to="/detail">Home</Link>
                我是首页
                <div>count的值: {this.state.count}</div>
                <Button onClick={this.addBtnClick.bind(this)} type="primary">加按钮</Button>
                <div>接收到子组件的值: {this.state.num}</div>
                <Sub1 
                    reduceBtnClickCallBack={this.reduceBtnClickCallBack.bind(this)}
                    count={this.state.count}>
                </Sub1>
            </div>
        );
    }
    componentDidMount() {
        this.getMyIP();
    }
}

export default Home;

子组件代码:

import React from 'react';
import { Button } from 'antd';

class Sub1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            num: 100
        }
    }
    // 减按钮 点击事件
    reduceBtnClick(){
        let num = this.state.num;
        num = num - 1;
        if (num <= 0) {
            num = 100;
        }
        this.setState({
            num: num 
        })
        const {reduceBtnClickCallBack} = this.props;
        reduceBtnClickCallBack(num);
       //  this.props.reduceBtnClickCallBack(num);
    }

    render() {
        return (
            <div className='sub1'>
                我是Home组件的子组件,接收到的父组件的数据：{this.props.count}
                <div>
                <Button onClick={this.reduceBtnClick.bind(this)}>减按钮{this.state.num}</Button>
                </div>
            </div>
        );
    }
    componentDidMount() {

    }
}

export default Sub1;

子组件往父组件传值简单说就是通过回调函数的形式传值。

至此父子组件之间的串子就完了。