react组件通信之父传子

index.js中导入“爸爸”App.js

import Reac  from 'react';
import ReactDOM from 'react-dom';

// 组件之间的传值
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

App.js中导入“儿子们”

import React, { Component } from 'react';
import Header from './Header'
import Footer from './Footer'

export default class App extends Component {
    constructor() {
        super()
        this.state = {
            val: ''
        }
    }
    // 文本框输入事件
    handleInput (e) {
        this.setState({
            val: e.target.value
        })
    }
    render () {
        return (
            <div>
                <h2>这是爸爸App.js</h2>
                <div>
                    <input value={this.state.val} onChange={this.handleInput.bind(this)} />
                    {/* <button οnclick={this.handleSubmit.bind(this)}></button> */}
                </div>
                <hr />
                {/* 父传子  先绑定 */}
                <Header value={this.state.val} ><font color="red">此处是Header双标签之间的内容</font></Header>

                <hr />

                <Footer value={this.state.val} ><font color="green">此处是Footer双标签之间的内容</font></Footer>

            </div>
        )
    }
}

“大儿子”Header.js

import React, { Component } from 'react';

export default class Header extends Component {
    render () {
        return (
            <div>
                <h2>这是大儿子Header.js</h2>
                {/* 通过props接收 */}
                通过this.props.属性接收爸爸中Header标签的value属性:{this.props.value}
                <br />
                通过this.props.children接收爸爸中Header双标签之间的内容: {this.props.children}
            </div>
        )
    }
}

“二儿子”Footer.js

import React, { Component } from 'react';

export default class Header extends Component {
    render () {
        return (
            <div>
                <h2>这是二儿子Footer.js</h2>
                {/* 通过props接收 */}
                通过this.props.属性接收爸爸中Footer标签的value属性: {this.props.value}
                <br />
                通过this.props.children接收爸爸中Footer双标签之间的内容: {this.props.children}
            </div>
        )
    }
}

效果图：