class HelloWorld extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            isActive:false
        }
    }
    render() {
        return (
            <div>
                <button onClick={this.ShowChild}>显示子元素</button>
                <ChildrenDom isActive={this.state.isActive} />
            </div>


        )
    }
    ShowChild = ()=>{
        if(this.state.isActive){
            this.setState({
                isActive:false
            })
        }else{
            this.setState({
                isActive:true
            })
        }
    }
}


class ChildrenDom extends React.Component{
    constructor(props) {
        super(props)
    }
    render() {
        // console.log(this.props.isActive)
        let strClass = ‘‘
        if(this.props.isActive){
            strClass = ‘ active‘
        }else{
            strClass = ‘‘
        }
        return (
            <div>
                <h1 className={‘content‘+strClass}>我是子元素</h1>
            </div>
        )
    }
}

ReactDOM.render(
    <HelloWorld />,
    document.querySelector(‘#root‘)
)

    constructor(props) {
        super(props)
        this.state = {
            num:0
        }
    }
    render() {
        return (
            <div>
                <h1>我是父元素中的{this.state.num}</h1>
                <ChildCom add={this.setNum} />
            </div>
        )
    }
    setNum=()=>{
        this.setState({
            num: this.state.num+1
        })
    }
}

class ChildCom extends React.Component{
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
　　　　　　　　　　{/*第一种方法*/}

                {/*<button onClick={this.setParent}>我是子元素的按钮</button>*/}
　　　　　　　　　　{/*第二种方法*/}
                <button onClick={()=>{this.props.add()}}>我是子元素的按钮2</button>
            </div>
        )
    }
    // setParent=()=>{
    //     this.props.add()
    // }
}

ReactDOM.render(
    <ParentCom />,
    document.querySelector(‘#root‘)
)