五、【React基础】组件实例三大核心属性之二 props-CSDN博客

本文链接：https://blog.csdn.net/qq_30769437/article/details/128022160

本文详细介绍了React中props的使用，包括简单的props传递、props的限制与验证、props的简写形式以及函数式组件如何接收和使用props。强调props的只读性质，并展示了如何通过prop-types库进行类型检查和默认值设定。文章还提到了在不同React版本中props限制的变化，并提供了代码示例帮助理解。

摘要由CSDN通过智能技术生成

文章目录

1、props 的简单使用
- 1.1、CODE
- 1.2、Result
2、对 props 进行限制
3、props 简写
4、函数式组件使用 props

理解：

每个组件对象都会有 props（properties的简写）属性
组件标签的所有属性都保存在 props 中

作用：通过标签属性从组件外向组件内传递变化的数据

注意：props 是只读的，组件内部不要修改 props 数据，也不允许修改，修改就报错

读取：this.props.xxx

1、props 的简单使用

1.1、CODE

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>props基本使用</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        //创建组件
        class Person extends React.Component {
            render() {
                console.log(this);
                const { name, age } = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Person name="peiqi" age={9} />, document.getElementById('test1'))
        ReactDOM.render(<Person name="qiaozhi" age={18} />, document.getElementById('test2'))

        const person = { name: 'xiaobai', age: 18 }
        ReactDOM.render(<Person {...person} />, document.getElementById('test3'))
    </script>
</body>

</html>

1.2、Result

在这里插入图片描述

2、对 props 进行限制

React v15.5 版本之前使用 React.PropTypes.xxx，React v15.5 版本正式弃用

新方式：使用prop-types库进行限制（需要引入prop-types库）

<script type="text/javascript" src="../js/prop-types.js"></script>

// 以下代码写在组件类外部
//对标签属性进行类型、必要性的限制
Person.propTypes = {
    name: PropTypes.string.isRequired, //限制name为字符串，且必传
    age: PropTypes.number,//限制age为数值
    // ReactDOM.render(<Person name={100} speak={()=>{}}/>,document.getElementById('test1'))
    speak: PropTypes.func,//限制speak为函数
}
//指定默认标签属性值
Person.defaultProps = {
    name: 'peiqi',//name默认值为peiqi
    age: 8 //age默认值为8
}

3、props 简写

构造函数是否必要？参考官网 constructor()

总结一句：无用不必写，如果写了必调 supper(props)，传入接收到的 props(如果有，当然了怎么会没有呢？)，小白建议写…个锤子

class Person extends React.Component{

    static propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number
    }

    static defaultProps = {
        name:'peiqi',
        age: 8
    }

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

ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))

4、函数式组件使用 props

在学习 Hooks 之前函数式组件只能用三大核心属性中的 props

//创建组件
function Person (props){
    const {name, age} = props
    return (
        <ul>
            <li>姓名：{name}</li>
            <li>年龄：{age}</li>
        </ul>
    )
}

// 对标签属性进行类型、必要性的限制
Person.propTypes = {
    name: PropTypes.string.isRequired, // 限制name为字符串，且必传
    age: PropTypes.number // 限制age为数值
}

//指定默认标签属性值
Person.defaultProps = {
    name: 'peiqi', // name默认值为peiqi
    age: 8 // age默认值为8
}
//渲染组件到页面
ReactDOM.render(<Person/>, document.getElementById('test1'))

小白学习参考视频：尚硅谷React教程

中文官网：React 官方中文文档