react父子组件传值

父子组件传值

   父组件==>子组件

   props:   

    <Header run={this.run} ref="header" msg="我是首页的头部组件" active="home"/>

  子组件：

    我是{this.props.msg}

  父组件代码：

    

import React from 'react';
import Header from './Header';
import '../assets/css/index.css';
class Home extends React.Component{
    constructor (props) {
        super(props);
        this.state = {
            mes: "我是一个home组件",
            title: "我是home的标题",
            redText: "我是红色字体",
            lable: '测试label for属性绑定需要注意换成htmlFor',
            style: {
                color: "yellow",
                "fontSize": "56px" 
            }
        }
    }
    run =  ()=>{
        debugger;
        alert("run方法");
    }
    hanlederClick(e){
        alert(this.refs.header.state.msg);
    }
    render() {

        return (
            <div>
                <Header run={this.run} ref="header" msg="我是首页的头部组件" active="home"/>

                <div>
                    <button onClick={this.hanlederClick.bind(this)}>获取当前子组件的msg</button>
                </div>
               {/* <h1 onClick={this.hanlederClick.bind(this)}> {this.state.title}</h1>
                <hr/>
                <p className="red"> {this.state.redText} </p>
                <br/>
                <label htmlFor="name"></label>
                <input type="text" defaultValue={this.state.lable}/>

                <br/>
                <h3>style</h3>
                <hr/>
                 <h5 style={{color: 'green','fontSize': '28px'}}>style样式绑定</h5> 
                 <p style={this.state.style}>this.state.style样式绑定</p>  */}
            </div>
        );
    }
}
export default Home;

子组件 代码

import React from 'react';
import '../assets/css/header.css';
class Header extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            msg: "点击我的是傻逼"
        }
    }
    render() {
        let navs = [
             <li active="home"><a>首页</a></li>,
             <li active="news"><a>新闻</a></li>,
             <li active="user"><a>用户</a></li>
        ];
       let active = this.props.active;
  

        return (
            <div className="header">
                <div>
                    <ul>
                        <li>
                            <a>首页</a>
                        </li>
                        <li>
                            <a>新闻</a>
                        </li>
                        <li>
                            <a>
                                用户
                            </a>
                        </li>

                          <li>
                            <button onClick={this.props.run}>调用父组件的run方法</button>
                        </li>
                    </ul>
                </div>
           
                <div className="clear-fixed">
                    我是{this.props.msg}
                </div>
            </div>

        )
    }

}


export default Header;