• React之组件实例的三大属性之props

    文章目录

    props

    每个组件对象都会有props(properties的简写)属性
    组件标签的所有属性都保存在props中
    通过标签属性从组件外向组件内传递变化的数据，组件内不能够修改props数据

    实例

    做一个能够展示姓名、学号、性别的列表组件，并且能够设置默认值。
    这里就需要用到之前没用到的prop-types.js了
    为了防止react太笨重，就将限制类型的模块单独抽了出来，方便选择是否使用，需要使用导入即可。

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="test1">div>
    <div id="test2">div>
    <div id="test3">div>
    <div id="test4">div>
    <script src="../js/react.development.js">script>
    <script src="../js/react-dom.development.js">script>
    <script src="../js/babel.min.js">script>
    <script src="../js/prop-types.js">script>
    <script type="text/babel">
        class Person extends React.Component {
        //对标签属性进行类型、必要性的限制
        static propTypes = {
            name:PropTypes.string.isRequired, //限制name必传，且为字符串
            sex:PropTypes.string,
            age:PropTypes.number, //限制为数字
            speak:PropTypes.func //限制为函数
        }
        //指定模标签属性值
        static defaultProps ={
            sex:"男",
            age:18
        }
        
        render() {
                //props只读不能改
                const {name, age, gender} = this.props
                return (
                    <ul>
                        <li>{name}</li>
                        <li>{age}</li>
                        <li>{gender}</li>
                    </ul>
                )
            }
        }

        ReactDOM.render(<Person name="tom" age={19} gender="男"/>, document.getElementById("test1"))
        ReactDOM.render(<Person name="pretty" gender="女"/>, document.getElementById("test2"))
        ReactDOM.render(<Person name="hunter" age={21} gender="男"/>, document.getElementById("test3"))

        const p = {name:"AABB", age:19, gender:"UNK"}
        //展开运算符
        ReactDOM.render(<Person {...p}/>, document.getElementById("test4"))
        function speak(){
            console.log("speaking...")
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58

    前言万语都在注释里，运行结果：
    在这里插入图片描述
    如果我们将AABB的age改成字符型

    const p = {name:"AABB", age:"19", gender:"UNK"}

    • 1

    那么结果如下：
    在这里插入图片描述
    会警告数据类型错误，达到限制数据类型的提示。

  • 相关阅读:
    数据结构小记【Python/C++版】——栈篇
    不存在的！python说不给数据的浏览器是不存在的！
    汽车OBD2蓝牙诊断仪解决方案程序开发
    javaweb中的转发与重定向
    边云协同架构设计
    LeetCode每日一题 搜索插入位置(二分查找)
    再推新品，但华为智慧屏还在等一个契机
    【001】 libpq是什么？如何使用？
    浮动面试题
    认识运营商机房
  • 原文地址：https://blog.csdn.net/qq_52785473/article/details/126253607