react.js组件传值父传子

父组件传子组件

父组件传值（通过自定义属性）：
例如：

在父组件index.js文件内引入并使用Child1子组件，模拟数据，把数据传到Child1里面：

import React, { Component } from 'react'
import Child1 from './components/Child1'

// 父组件  父组件向子组件传值

export default class One extends Component {

    state = {
        hello: '我是父组件的值'
    };

    render() {
        // 对象结构方式，将state中的数据提取出来，赋值给另外的变量
        // vue中一直是直接写：this.state.xxx
        let { hello } = this.state;

        // 对象结构
        return (
            <div>
                {/* 给子组件绑定hello这个属性 */}
                {/* 注意：等号右边的hello对应的是上面值的Hello，也就是要传的数据 */}
                <Child1 hello={hello} />
            </div>
        )
    }
}

子组件接收传过来的值（通过组件实例props接收父组件传过来的值）：

父组件写完后去子组件Child1.js:

import React, { Component } from 'react'


// 子组件  父组件向子组件传值

export default class Child1 extends Component {
    render() {
        // props，这个属性是由父组件传递给子组件的，
        // 它是一个对象，里面存有父组件传递下来的参数
        let { hello } = this.props
        // 子组件里的hello 对应的是父组件里的 等号左边的hello
        // 也就是说，若父组件写：
        // 等号左边的是要传的属性，等号右边的是属性值
        return (
            <div>
                {hello}
            </div>
        )
    }
}

最后打开浏览器 父组件的值传递成功：