前端学习（2232）：react的父传子数据传递

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

import './App.css'
class ParentCom extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isActive: true
        }
        this.changeShow = this.changeShow.bind(this)
    }
    render() {
        return ( <
            div >
            <
            button onClick = { this.changeShow } > 控制子元素显示 < /button> <
            ChildCom isActive = { this.state.isActive } > < /ChildCom> < /
            div >
        )
    }
    changeShow() {
        this.setState({
            isActive: !this.state.isActive
        })
    }
}


class ChildCom extends React.Component {
        constructor(props) {
            super(props)

        }
        render() {
            let strClass = null;
            if (this.props.isActive) {
                strClass = 'active'
            } else {
                strClass = ''
            }
            return ( < div className = { 'content' + strClass } >
                <
                h1 > 我是子元素 < /h1></div > )

        }
    }
    //console.log("这是渲染函数")
ReactDOM.render( < ParentCom / > , document.querySelector("#root"))

运行结果