react父传子

react父子传值:

父子组件传值对于vue或者react中来说 都是比较重要的,话不多说 上代码:

首先定义父组件

父组件
class Parent extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    num: 100
                }
            }
            render() {
                let { num } = this.state     解构出state中的num值
                return (
                    <div>
                        <Child num={num} />  把child(子组件)放到父组件中
                    </div>

                )
            }
        }

　　定义子组件

子组件
class Child extends React.Component {
            render() {
                return (
                    <div>{this.props.num}</div>
                )
            }

        }

　由于我们写的是html页面,所以需要有个最大的父组件来接收上面的(Parent组件),

　　document.getElementById('app') 是将html页面中的id为app获取出来

ReactDOM.render(
            <div>
                <Parent />
            </div>,
            document.getElementById('app')
        )