MENU

React学习笔记【6】

第七节

父传子数据传递

Props:父传递给子组件数据,单向流动,不能子传递给父
props的传值可以是任意的类型。

props设置默认值

msg.defaultProps = { name:'react',msg:'helloworld'}

注意:props可以传递函数,props可以传递父元素的函数,就可以修改父元素的state,从而达到传递数据给父元素

第八节

子传父数据传递

调用父元素的函数从而操作父元素的数据,从而实现数据从子元素传递至父元素

本节代码

import React from 'react';
import ReactDOM from 'react-dom';
import './01.css'
//在父元素中使用state去控制子元素的props从而达到父元素数据传递给子元素
/*
class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isActive: false
        }
    }
    changeShow = () => {
        this.setState({
            isActive: !this.state.isActive
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.changeShow}>控制子元素</button>
                <Children isActive={this.state.isActive} />
            </div>
        )
    }
}

class Children extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let strClass = null;
        if (this.props.isActive) {
            strClass = " active"
        } else {
            strClass = ""
        }
        return (
            <div>
                <h1 className={"content" + strClass}>Children</h1>
            </div>
        )
    }
}

ReactDOM.render(
    <Parent />
    ,
    document.querySelector("#root")
)

*/
// ----------------------------------------------------

//子传父
class ParentCom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            childDate: null
        }
    }
    handlerClick = (data) => {
        this.setState({
            childData: data
        })
    }
    render() {
        return (
            <div>
                <h1>子元素传递给父元素的数据:{this.state.childData}</h1>
                <ChildCom handlerClick={this.handlerClick} />
            </div>
        )
    }
}

class ChildCom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: "Helloworld"
        }
    }
    sendData = () => {
        this.props.handlerClick(this.state.msg)
    }
    render() {
        return (
            <div>
                <button onClick={this.sendData}>传递Helloworld给父元素</button>
                <button onClick={() => { this.props.handlerClick('hello2') }}>传递hello2给父元素</button>
            </div>
        )
    }
}

ReactDOM.render(
    <ParentCom />
    ,
    document.querySelector("#root")
)
.content{
    display: none;
    background-color: orchid;
    width: 400px;
    height: 400px;
}
.content.active{
    display: block;
}

文章标题:React学习笔记【6】
如果文中内容侵犯了您的权益,请及时与博主取得联系进行删除!
本站文章未经许可禁止转载,本文地址:https://blog.wanvale.com/archives/240/

Archives QR Code Tip
QR Code for this page
Tipping QR Code