react--父子组件传参

新增Child.js文件

import React from 'react';

export default class Child extends React.Component{
    render(){
        return (
            <div>
                <p>我是子组件</p>
                <p>{this.props.value}</p>
            </div>
        )
    }
}

修改Home2.js文import React from 'react';

import {Link} from "react-router-dom";
import Child from './Child';

export default class Home2 extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            father: 'father'
        }
    }

    changeRoute = () => {
        this.props.history.push('/twoPage');
    };

    render(){
        return (
            <div>
                <div>
                    <p>我是Home2组件</p>
                    <Link to="/onePage">点我跳转到one页面</Link><br/>
                    <Link to="/twoPage/2">点我跳转到two页面</Link><br/>
                    <Link to="/this">点我跳转到this页面</Link>
                    <p onClick={this.changeRoute}>点我试试</p>
                </div>
                <div>
                    <p>我是父组件</p>

                    <Child value={this.state.father} />
                </div>
            </div>
        )
    }
}

父传子
import进来的组件名是什么，标签名就是什么，然后value这个key是随便起的，但要跟Child组件里的this.props.value一致就OK
比如

<Child str={this.state.father} />

对应的Child里的获取key要改成<p>{this.props.str}</p>  这跟路由系统的to和path要一致是一个道理

子传父

父组件Home2.js

import React from 'react';
import {Link} from "react-router-dom";
import Child from './Child';

export default class Home2 extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            father: 'father',
            childValue: ''
        }
    }

    changeRoute = () => {
        this.props.history.push('/twoPage');
    };

    getChildValue = (val) => {
        if(val){
            this.setState({
                childValue: val
            })
        }
    };

    render(){
        return (
            <div>
                <div>
                    <p>我是Home2组件</p>
                    <Link to="/onePage">点我跳转到one页面</Link><br/>
                    <Link to="/twoPage/2">点我跳转到two页面</Link><br/>
                    <Link to="/this">点我跳转到this页面</Link>
                    <p onClick={this.changeRoute}>点我试试</p>
                </div>
                <div>
                    <p>我是父组件</p>
                    <Child value={this.state.father} getChildValue={this.getChildValue} />
                    <p>{this.state.childValue}</p>
                </div>
            </div>
        )
    }
}

子组件Child.js：

import React from 'react';

export default class Child extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            child: 'child'
        }
    }

    forFatherValue = () => {
        this.props.getChildValue(this.state.child)
    };

    render(){
        return (
            <div>
                <p>我是子组件</p>
                <p>{this.props.value}</p>
                <p onClick={this.forFatherValue}>点我给父组件传递参数</p>
            </div>
        )
    }
}

 

只需要在子组件标签上添加父组件的事件，这个事件要能接收参数，子组件传递过来的值就在这个参数里，还要注意子组件调用的是子组件的方法，
方法内部才是this.props.父组件绑定的key，这个key也是自己想取什么都可以，绑定什么key子组件方法内部就调用什么key，多试几遍就能记住。