React的props基本使用及注意事项

props的基本使用import React from 'react';/** 子组件 */class Person extends React.Component {render() {{/** 在this.props中接收来自父组件的参数 */}const { name, age, sex } = this.propsreturn (<ul><li>姓

可缺不可滥

1994人浏览 · 2021-06-22 23:44:08

可缺不可滥 · 2021-06-22 23:44:08 发布

文章目录

props的基本使用

import React from 'react';
/** 子组件 */
class Person extends React.Component {
    render() {
        {/** 在this.props中接收来自父组件的参数 */}
        const { name, age, sex } = this.props
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别: {age}</li>
                <li>年龄: {sex}</li>
            </ul>
        )
    }
}

/** 父组件 */
class Props extends React.Component {
    render() {
    	/** 定义一个对象，将所有要传递给子组件Person的参数放入 */
        const Person2 = {
            name: 'yx',
            age: 18,
            sex: '女'
        }
        return (
            <>
                <Person name="dx" age={18} sex="男" />
                {/** 注意: 这种传参方式是jsx语法特有的，不是es6的扩展语法 */}
                {/** {...Person2}中的{}也不是指的对象 */ } 
                <Person {...Person2} />
            </>
        )
    }
}

export default Props;

子组件对接收的props进行限制

第一种限定props的方式

import React from 'react';
/** 必须引入PropTypes对props进行限制 */
import PropTypes from 'prop-types';

/** 子组件 */
class Person extends React.Component {
    render() {
        // @ts-ignore
        const { name, age, sex } = this.props
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别: {age}</li>
                <li>年龄: {sex}</li>
            </ul>
        )
    }
}

/** 对子组件props进行限制 */
Person.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    sex: PropTypes.string
}


class Props extends React.Component {
    render() {
        return (
            <>
                {/** 这是错误的写法，因为age在props中被限制为一个number */}
                <Person name="dx" age="18" sex="男" />
            </>
        )
    }
}

export default Props;

第二种限定props的方式

import React from 'react';
/** 必须引入PropTypes对props进行限制 */
import PropTypes from 'prop-types';

/** 子组件 */
class Person extends React.Component {
	/** 对子组件props进行限制 */
	static propTypes = {
   		name: PropTypes.string.isRequired,
    	age: PropTypes.number.isRequired,
    	sex: PropTypes.string
   	}
    render() {
        // @ts-ignore
        const { name, age, sex } = this.props
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别: {age}</li>
                <li>年龄: {sex}</li>
            </ul>
        )
    }
}
class Props extends React.Component {
    render() {
        return (
            <>
                {/** 这是错误的写法，因为age在props中被限制为一个number */}
                <Person name="dx" age="18" sex="男" />
            </>
        )
    }
}

export default Props;

更多的关于propTypes的可选限制及写法
react官网关于proptypes的说明：https://react.docschina.org/docs/typechecking-with-proptypes.html

注意
1.如果父组件传递的参数与子组件在propTypes 中限定不同，页面虽然不会崩溃，但在控制台会报错
在这里插入图片描述
2.两种方式本质上都是对类本身的propTypes这个静态属性进行配置，只是写法不同而已，react都能接收到。
3.两种方式相比较，更推荐第二种写法，因为将props的限制放在类里面，这样更简洁

子组件对props设置默认值

第一种方式设置props默认值

import React from 'react';
import PropTypes from 'prop-types';
/** 关于props的注意事项 */
class Person extends React.Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number.isRequired,
        sex: PropTypes.string
    }
    /** 通过defaultProps属性设置组件props的默认值 */
    static defaultProps = {
        sex: '男'
    }
    render() {
        const { name, age, sex } = this.props
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别: {age}</li>
                <li>年龄: {sex}</li>
            </ul>
        )
    }
}

class Props extends React.Component {
    render() {
        return (
            <>
                {/**  并未传递性别sex */}
                <Person name="dx" age={18} />
            </>
        )
    }
}

export default Props;

第二种方式设置props默认值

import React from 'react';
import PropTypes from 'prop-types';
/** 关于props的注意事项 */
class Person extends React.Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number.isRequired,
        sex: PropTypes.string
    }

    render() {
        const { name, age, sex } = this.props
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别: {age}</li>
                <li>年龄: {sex}</li>
            </ul>
        )
    }
}

 /** 通过defaultProps属性设置组件props的默认值 */
 Person.defaultProps = {
     sex: '男'
 }

class Props extends React.Component {
    render() {
        return (
            <>
                {/**  并未传递性别sex */}
                <Person name="dx" age={18} />
            </>
        )
    }
}

export default Props;

注意
1.如果子组件设置了默认值，父组件可以不传
2.两种方式本身都是设置类的defaultProps，原理与propTypes类似
3.第一种方式更简洁，更推荐
4.如果设置了默认值，父组件又传递了参数，父组件传递的参数将会覆盖设置的默认值。

props为只可读属性

只可读是什么意思呢，就是在子组件中不能对this.props对象中的某一个属性重新赋值。

import React from 'react';
import PropTypes from 'prop-types';
/** 关于props的注意事项 */
class Person extends React.Component {
    render() {
    	/** 这是错误示范,this.props的属性是不能更改的 */
    	this.props.name = 'yyds'
        const { name, age, sex } = this.props
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别: {age}</li>
                <li>年龄: {sex}</li>
            </ul>
        )
    }
}

class Props extends React.Component {
    render() {
        return (
            <>
                {/**  并未传递性别sex */}
                <Person name="dx" age={18} />
            </>
        )
    }
}

export default Props;

如上述的错误示例，不可对只读属性进行赋值，浏览器会报错

在这里插入图片描述

函数式组件props的使用

过去，函数式组件只能操作props（三大组件重要属性 props state ref）。
因为state和ref，在过去，都需要从this（组件实例）中取，而函数式组件的this不是组件实例。
但函数本身可以接收参数，所以函数式组件的参数，其实就是props

import React from 'react';
import PropTypes from 'prop-types';

/** 函数子组件 */
function Student(props) {
    return (
        <ul>
            <li>学生姓名：{props.name}</li>
            <li>学生性别: {props.age}</li>
            <li>学生年龄: {props.sex}</li>
        </ul>
    )
}
/** 父组件 */
class Props extends React.Component {
    render() {
        return (
           <Student name="dx" age={18} sex="男" />
        )
    }
}

export default Props;

函数式子组件可以定义props的默认值和限制props接收的类型吗？答案是可以。
但是function不能写静态属性static，所以，只能用下面的这种方式

import React from 'react';
import PropTypes from 'prop-types';

function Student(props) {
    return (
        <ul>
            <li>学生姓名：{props.name}</li>
            <li>学生性别: {props.age}</li>
            <li>学生年龄: {props.sex}</li>
        </ul>
    )
}
/** 给构造函数Student加propTypes 限制props */
Student.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    sex: PropTypes.string
}

/** 给构造函数Student加defaultProps 设置默认值 */
Student.defaultProps = {
    sex: '男'
}

class Props extends React.Component {
    render() {
        return (
           <Student name="dx" age={18} />
        )
    }
}

过去，函数式组件只能操作props。上面可能大家注意到了过去两字。意思就是现在的函数式组件可以玩state和ref了（通过hook的方式）。但在处理props时，无论是过去的函数式组件，还是现在的函数式+ hooks组件，都是一样的。

跳出react本身的技术限制，在react中使用props

如果你用了typescript，或者你会typescript，肯定知道，可以用过types或者interface来限定组件props的类型。不一定非要用react的propTypes

如果你会用es6，也应该知道，可以用以下的方式来设置默认值，就不过多展开讲了。

function Student(props) {
	const {name, age, sex = '男'} = this.props
    return (
        <ul>
            <li>学生姓名：{name}</li>
            <li>学生性别: {age}</li>
            <li>学生年龄: {sex}</li>
        </ul>
    )
}

都看到这里了，求点赞，关注，评论，感谢各位大佬的支持，是我继续创作的动力。
在这里插入图片描述

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

工程监理行业多模态视觉大模型系统，打造工地行业全场景的监理智能生态

2048 AI社区

分析AI代码助手对开发流程的重构与伦理挑战

AI代码助手的引入，重新定义了开发流程中的许多环节。传统的开发流程通常包括需求分析、设计、编码、测试和维护五个阶段，而AI的加入，特别是在编码阶段，改变了开发者的工作方式。AI不仅是一个工具，它也在逐步扮演“合作伙伴”的角色。在开发过程中，AI可以为开发者提供实时反馈，帮助他们更快速地发现错误并优化代码结构。例如，当开发者在编写代码时，AI可以分析其代码的上下文，预测开发者可能需要的下一行代码，并