react实现组件之前传递数组

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

content.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: ''}
        this.state={info:[]}
    }
    // showRight(age) {
    //     alert(age)
    //     this.setState({ ages: age });
    // }

    showRight(n) {
        this.state.info.push(n)
        this.setState({ info:this.state.info});//如果不加不会重新调用生命周期，浏览器内容不会刷新
    }
    render() {
        return (
            <div>
                
                <h2>内容</h2>
                {/* {this.state.ages} */}
                {/* <Left username='lily' userage={this.state.ages}></Left>父给子传值,子之间传值 */}
                {/* <Right showMsg={this.showRight.bind(this)} ></Right>子给父传值    */}

                <Left username='lily' userage={this.state.ages} userinfo={this.state.info}></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>
            {this.props.userinfo.map((v,i)=>{return (<li key={i}>{v}</li>)})}
        </div>
    )  
    }
   
}

right.js

import React from "react";
export class Right extends React.Component{
    constructor(){
        super();
        // this.state = {names:['lily','tom','lucy']}
    }
    // runRight(){
    //     this.props.showMsg('19')
    // }

    runRight(){
        this.props.showMsg(this.uname.value)
    }
    render(){
       return(
        <div>
            <h2>right</h2>
            <input type='text' ref={ref=>this.uname=ref}/>
            <button onClick={this.runRight.bind(this)}>传值</button>
            <ul>
                {/* {this.state.names.map((v,i)=>{return (<li key={i}>{v}</li>)})} */}
            
                {/* <li></li> */}
            </ul>
        </div>
    )  
    }
   
}