React自学笔记（七）---react父子组件传值

主页面新闻页面：

import React, { Component } from 'react';
import '../assets/css/index.css'
// import logo from '../assets/images/logo.svg';
import Header from './Header';
import Footer from './Footer'

class News extends React.Component {
    constructor(props) {
        super(props)   /*用于父子组件传值 */

        //定义数据
        this.state = {
            msg:'我是新闻的msg',
            title:'新闻组件'
        }
    }

    run=()=>{
        alert("我是父组件的run方法")
    }

    //获取子组件里面传过来的数据
    getChildData=(result)=>{
        alert(result)
        this.setState({
            msg:result
        })
    }

    getFooter=()=>{
        // alert(this.refs.footer.state.msg)
        this.refs.footer.run();
    }

    getData=()=>{
        alert(this.state.title)
    }

    render() {// eslint-disable-next-line
        return (
            // eslint-disable-next-line
            <div>
              <Header title={this.state.title} run={this.run} news={this}/>
                <br />
                <hr />
                <br />
                这是新闻组件的内容---{this.state.msg}
                <br />
                <button onClick={this.getFooter}>获取整个底部组件</button>
                <br />
                <hr />
                <br />
                <Footer ref='footer' />
            </div>
        )
    }
}

export default News;

引入头部组件：Header.js

import React, { Component } from 'react';

class Header extends Component{
    constructor(props){
        super(props);
        this.state={
            msg:'这是一个头部组件'
        }
    }

    getNews=()=>{
        alert(this.props.news.state.msg)
    }

    render() {
        return(
            <div>
             <h2>{this.props.title}</h2>
             <button onClick={this.props.run}>调用news父组件的run</button>
             <br /><br />
             <button onClick={this.props.news.getData}>调用news组件的getData方法</button>
             <br /><br />
             <button onClick={this.getNews}>获取整个news实例</button>
             <br /><br />
             <button onClick={this.props.news.getChildData.bind(this,"klll")}>子组件给父组件传值</button>
            </div>
        )
    }
}

export default Header;

引入底部组件：Footer.js

import React, { Component } from 'react';

class Footer extends Component{
    constructor(props){
        super(props);
        this.state={
            msg:'这是一个底部组件'
        }
    }

    run=()=>{
        alert('这是底部组件的run方法')
    }
    
    render() {
        return(
            <div>
                <h2>{this.state.msg}</h2>
            </div>
        )
    }
}

export default Footer;

P.S.：父子组件间传值（通信）

父组件给子组件传值：
1、在调用子组件的时候定义一个属性 <Header title={this.state.title} run={this.run} news={this}/>
2、子组件里面的this.props.title

父组件主动获取子组件的数据：
1、调用子组件的时候指向ref的值 <Header ref='header' />
2、通过this.refs.header获取整个子组件的实例（dom（组件）加载完成以后获取）