react中父子组件传值详解,如何进行传值校验(父传子,子组件改变父组件的值)

简介: 本篇主要给大家介绍react中父子组件传值详解,如何进行传值校验

父子组件的传值

在react中,父传子可以使用props的方法,子传父使用props的回调函数
父组件:
在父组件中定义state,将这个state对象传给子组件,所以可以直接在son组件上写{...this.state}

import React, { Component } from 'react'
import Son from './son'

export class Parent extends Component {
    constructor() {
        super()
        this.state = {
            name: '父组件',
            msg: '这是父组件的信息'
        }
    }
    render() {
        return (
            <div>
                <h1>Parent Page</h1>
                <h2>我是父组件的:{msg}--{name}</h2>
                <Son {...this.state} parentChange={this.parentChange.bind(this)}/>
            </div>
        )
    }
}

export default Parent

子组件:
在state中写入parentMsg: props.msg,这样在页面中可以直接展示parentMsg,也就是父组件传过来的值

import React, { Component } from 'react'

export class Son extends Component {
    constructor(props) {
        super()
        this.state = {
            name: '子组件',
            msg: '这是子组件的内容',
            parentMsg: props.msg
        }
    }
    render() {
        // 在这种父子组件中需要用到同样的属性名的时候,我们会选择定义别名进行区分
        let { name, msg, parentMsg } = this.state
        return (
            <div>
                <h1>Son Page</h1>
                <p>{name}-{msg}</p>
                <p>父组件传过来的值{parentMsg}</p>
            </div>
        )
    }
}
export default Son

父子组件重名问题解决

父组件中有name,msg,子组件也有该变量的名字,如果想要一起使用该如何操作呢?
在子组件中,state中的是自己的,props中的是从外面传进来的,所以我们可以给props中的变量起一个别名:
如果不想用别名的话,我们也可以直接用this.state.name,this.props.name

import React, { Component } from 'react'

export class Son extends Component {
    constructor(props) {
        super()
        this.state = {
            name: '子组件',
            msg: '这是子组件的内容',
            parentMsg: props.msg
        }
    }
    render() {
        // 在这种父子组件中需要用到同样的属性名的时候,我们会选择定义别名进行区分
        let { name: pName, msg: pMsg } = this.props
        let { name, msg, parentMsg } = this.state
        return (
            <div>
                <h1>Son Page</h1>
                <p>{name}-{msg}</p>
                <p>父组件传过来的值{parentMsg}-{pName}-{pMsg}</p>
            </div>
        )
    }
}
export default Son

子组件改变父组件的值

我们在子组件中定义一个输入框,希望通过这个输入框改变父组件展示的值:
思路:父组件中写方法,子组件中进行调用
父组件:
1.定义函数parentChange,将里面的data作为参数传进来
2.将该方法传给子组件

import React, { Component } from 'react'
import Son from './son'

export class Parent extends Component {
    constructor() {
        super()
        this.state = {
            name: '父组件',
            msg: '这是父组件的信息'
        }
    }
    // 如果要让子组件改父组件的值的话就需要定义这个函数
    parentChange(data) {
        console.log(data)
        this.setState({msg: data})
    }
    render() {
        let { name, msg } = this.state
        return (
            <div>
                <h1>Parent Page</h1>
                <h2>我是父组件的:{msg}--{name}</h2>
                {/* 子组件改父组件的值,就把父组件的改值事件传给子组件进行一个回调 */}
                <Son {...this.state} parentChange={this.parentChange.bind(this)}/>
            </div>
        )
    }
}

export default Parent

子组件:
1.给输入框绑定onChange函数
2.在handleChange函数中调用父组件传进来的方法this.props.parentChange(e.target.value),传进去的值就是input输入的值

import React, { Component } from 'react'

export class Son extends Component {
    constructor(props) {
        super()
        this.state = {
            name: '子组件',
            msg: '这是子组件的内容',
            parentMsg: props.msg
        }
    }
    handleChange = (e) => {
        this.setState({parentMsg: e.target.value})
        // 这里对父组件传过来的方法进行调用
        this.props.parentChange(e.target.value)
    }
    render() {
        // 在这种父子组件中需要用到同样的属性名的时候,我们会选择定义别名进行区分
        let { name, msg, parentMsg } = this.state
        return (
            <div>
                <h1>Son Page</h1>
                <p>{name}-{msg}</p>
                <p>父组件传过来的值{parentMsg}</p>
                <input type="text" value={parentMsg} onChange={this.handleChange} />
            </div>
        )
    }
}
export default Son

传值校验

如果我们要对传值的类型进行校验应该怎么做呢?
这里进行验证主要是为了提高我们代码的可读性,便于协同开发,提高效率。

进行传值校验,我们需要用到prop-types,在react15版本以后,prop-types是另外的一个包,需要手动下载。

下载完成之后,直接在子组件页面顶部进行引入:

import PropTypes from 'prop-types'

在子组件里面进行传值类型校验:
使用语法:组件名.propTypes添加一个属性,属性值为对象

Son.propTypes = {
    name: PropTypes.string.isRequired, // 给isRequired属性代表必传项,不传就会报错
    msg: PropTypes.string
}

// 如果需要制定默认值则像下面这样使用
Son.defaultProps = {
    name: 'beiyu',
    msg: '学习react'
}
相关文章
|
30天前
|
前端开发 API
react怎么实现父子组件传值?
react怎么实现父子组件传值?
11 1
|
30天前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
178 0
|
30天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
64 0
|
28天前
|
前端开发
掌握React中的useContext:访问父组件数据的神奇技巧
掌握React中的useContext:访问父组件数据的神奇技巧
|
30天前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
29 0
|
30天前
|
JavaScript 前端开发 算法
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
24 0
|
30天前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
22 1
|
30天前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
25 0
|
30天前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
30天前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
86 1