start父子传值

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情 contents.js

import React from "react";
import { Left } from './Left.js';
import { Right } from './Right.js';
import { Header } from './header.js';
export class Contents extends React.Component {
    constructor() {
        super();
        this.state = { name: 'lily', ages: ''}
    }
    showRight(age) {
        // alert(age)
        this.setState({ ages: age });
    }
    render() {
        return (
            <div>
                <Header></Header>
                <h2>内容</h2>
                {/* {this.state.ages} */}
                <Left username='lily' userage={this.state.ages}></Left>{/*父给子传值，子之间传值*/}
                <Right showMsg={this.showRight.bind(this)} ></Right>{/*子给父传值*/}
            </div>
        )
    }

}

left.js

import React from "react";
export class Left extends React.Component{
    constructor(){
        super();
    }
    render(){
       return(
        <div>
            <h2>left</h2>
            <p>{this.props.username}</p>
            <p>{this.props.userage}</p>
        </div>
    )  
    }
   
}

right.js

import React from "react";
export class Right extends React.Component{
    constructor(){
        super();
    }
    runRight(){
        this.props.showMsg('19')
    }
    render(){
       return(
        <div>
            <h2>right</h2>
            <button onClick={this.runRight.bind(this)}>传值</button>
        </div>
    )  
    }
   
}