React学习第二天

父传子

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')
)

在父元素中使用state去控制子元素props的从而达到父元素数据传递给子元素

在父元素中render函数的return中写入子元素jsx对象

通过父类元素中的点击事件，改变给子元素的传参

不过改变父元素state中的值，需要使用setState方法，不然改变无效

父元素传递的参数，会放在子元素的props中

props还能传递函数，子元素调用传递的函数，实现 子元素改变父元素的值

 

 

 

子传父

调用父元素的函数从而操作父元素的数据，从而实现数据从子元素传递至父元class ParentCom extends React.Component{

    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')
)

在子元素中的点击事件，我用了两种方法

第一种方法不能直接调用父元素传递过来的函数，需要调用子元素中的方法去调用props中的方法

第二种方法使用的箭头函数（类似于lambda）来直接使用props中的传递函数