react中的props的使用_react props 缺省 tsx-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48952990/article/details/126214285

本文详细介绍了React组件中的props属性，包括其作为组件间传递数据的方式、只读特性，以及如何进行属性类型和必要性限制。同时，提到了扩展属性、默认属性值的设定，并通过对比props与state的区别，加深了对React组件状态管理的理解。最后，提供了复杂和精简案例，指导实际开发中的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

理解：

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

作用：

通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据

编码操作

内部读取某个属性值

this.props.propertyName

对props中的属性值进行类型限制和必要性限制

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

扩展属性: 将对象的所有属性通过props传递

<Person {...person}/>

默认属性值

Person.defaultProps = {
name: 'Mary'
}

组件类的构造函数

constructor (props) {
super(props)
console.log(props) // 查看所有属性
}

面试题

问题: 请区别一下组件的props和state属性

state: 组件自身内部可变化的数据
props: 从组件外部向组件内部传递数据, 组件内部只读不修改

具体案例，以及使用注意事项（复杂版）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</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>
    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        // 1.创建组件
        class Person extends React.Component{
            state={name:'tom',age:'18',sex:'女'}
            render(){
                const {name,age,sex}=this.props
                return(
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age+1}</li>
                    </ul>
                )
            }
        }
        // 对标签属性进行类型，必要性的限制
        Person.propTypes={
            name:PropTypes.string.isRequired,//对名字进行限制必须是string类型，必填的
            sex:PropTypes.string,//限制性别为字符串
            age:PropTypes.number,//限制age为数字
            speack:PropTypes.func,//限制speack默认为函数
        }
        // 指定标签属性的默认值
        Person.defaultProps={
            sex:'不男不女',//设置性别默认值为不男不女
            age:18//设置年龄默认值为18
        }
        ReactDOM.render(<Person name="jerry" age={19} sex="男" speack={speack}/>,document.getElementById('test1'))
        ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))
        const p={name:'xiaoxiao',age:18,sex:'女'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
        function speack(){
            console.log('我说话了')
        }
    </script>
</body>
</html>

精简版，可以利用类的static方式，把对标签属性进行类型，必要性的限制以及设置默认值的方法添加到类身上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</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>
    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        // 1.创建组件
        class Person extends React.Component{
            constructor(props){
                // 构造器是否接受props，是否传递给super，取决于：是否希望在构造器中通过this访问props
                super(props)
                console.log(this.props) 
            }
            state={name:'tom',age:'18',sex:'女'}
             // 对标签属性进行类型，必要性的限制--------给Person添加PropTypes
            static propTypes={
                name:PropTypes.string.isRequired,//对名字进行限制必须是string类型，必填的
                sex:PropTypes.string,//限制性别为字符串
                age:PropTypes.number,//限制age为数字
            }
            // 指定标签属性的默认值
            static defaultProps={
                sex:'不男不女',//设置性别默认值为不男不女
                age:18//设置年龄默认值为18
            }
            render(){
                const {name,age,sex}=this.props
                return(
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age+1}</li>
                    </ul>
                )
            }
        }
        ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
        
    </script>
</body>
</html>