React学习笔记—父子通信

一、React组件通信 ==> 父传子(属性props)

1、React组件中父传子使用this.props:

import React, { Component } from 'react'
import MyPropTypes from 'prop-types' // 提供验证数据类型的方法

class Navbar extends Component {
    // 属性验证
    static propTypes = {
        isShow: MyPropTypes.bool,
        mytitle: MyPropTypes.string
    }

    // 默认属性
    static defaultProps = {
        isShow: true
    }

    render() {
        return (
            <div>
                <button>back</button>
                {/* 父传子使用this.props.属性名 来接受 */}
                Navbar-----{this.props.mytitle}
                {
                    this.props.isShow ?
                        <button>home</button> : null
                }
            </div>
        )
    }
}

export default class App extends Component {
    render() {
        var obj = {
            mytitle: "测试",
            isShow: false
        }
        return (
            <div>
                <Navbar mytitle="home" isShow={false}></Navbar>
                <Navbar mytitle="list"></Navbar>
                <Navbar mytitle="detail"></Navbar>
                <Navbar mytitle="detail"></Navbar>
                {/* 属性简写 */}
                <Navbar {...obj}></Navbar> 
            </div>
        )
    }
}

二、React组件通信 ==> 子传父(回调函数)

1、React组件中子传父使用回调函数:

import React, { Component } from 'react'

class Navbar extends Component {
    render() {
        return (
            <div style={{ background: "red" }}>
                Navbar---
                <button onClick={this.handleClick}>click</button>
            </div>
        )
    }
    handleClick = () => {
        this.props.onKerwinEvent()
    }
}

class Sidebar extends Component {
    render() {
        return (
            <div style={{ background: "yellow" }}>
                Sidebar
                <ul>
                    <li>1111</li>
                    <li>222222</li>
                </ul>
            </div>
        )
    }
}

export default class App extends Component {
    state = {
        isShow: true
    }
    render() {
        return (
            <div>
                {/* 子传父 通过回调函数 */}
                <Navbar onKerwinEvent={() => {
                    this.setState({
                        isShow: !this.state.isShow
                    })
                }}></Navbar>
                {
                    this.state.isShow ?
                        <Sidebar></Sidebar> : null
                }
            </div>
        )
    }
}

三、Vue和React父子通信的区别

1、在Vue中:

父传子通过属性(props),子传父通过事件(emit)

2、在React中:

父传子通过属性(props),子传父通过回调函数


四、React中的ref通信(父子通信)

1、ref标记 (父组件拿到子组件的引用,从而调用子组件的方法) :

import React, { Component } from 'react'

class Input extends Component {
    state = {
        mytext: ""
    }
    reset = () => {
        this.setState({
            mytext: ''
        })
    }

    render() {
        return (
            <div>
                <div>other code</div>
                <input type="text" value={this.state.mytext} style={{ background: "yellow" }} onChange={(ev) => {
                    this.setState({
                        mytext: ev.target.value
                    })
                }} />
            </div>
        )
    }
}
export default class App extends Component {
    render() {
        return (
            <div>
                <Input ref="myinput"></Input>
                <button onClick={this.handleClick}>add</button>
            </div>
        )
    }
    handleClick = () => {
        // 拿到值
        console.log(this.refs.myinput.state.mytext);
        // 清空输入框的值
        this.refs.myinput.reset()
    }
}

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:React学习笔记—父子通信

文章字数:657

本文作者:Spicy boy

发布时间:2020-04-20, 00:05:20

最后更新:2020-08-26, 13:05:48

原始链接:http://www.spicyboy.cn/2020/04/20/React%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94%E7%88%B6%E5%AD%90%E9%80%9A%E4%BF%A1/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏