【React函数组件+类组件的props属性】

最新推荐文章于 2024-08-12 15:52:09 发布

fcc627

最新推荐文章于 2024-08-12 15:52:09 发布

阅读量1.5k

点赞数 1

分类专栏： web前端 React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/fcc627/article/details/126432956

版权

web前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

React

6 篇文章 0 订阅

订阅专栏

本文详细介绍了React中函数组件和类组件的props属性。在函数组件中，props用于接收和展示数据，是只读的。通过示例展示了如何定义和使用props，以及如何在类组件中通过构造函数和defaultProps设置props的默认值。强调了props在React应用中的重要性和使用规范。

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

一、React函数组件的props属性

1、用于接收React函数组件参数的输入

2、使用方式：

(1)定义函数组件

function 函数名(props) {
			 
			    props.参数名
			 
			 }

(2)使用函数组件：

<组件名属性名=‘属性值’>

注意：'属性名’就是参数名，会封装到props中

💥举例：

<!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>Document</title>
    <script src="../react的js库/react.development.js"></script>
    <script src="../react的js库/react-dom.development.js"></script>
    <script src="../react的js库/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        //1.获取页面的元素
          //不用querySelector是因为它对浏览器有依赖性，有时可能不会显示
        const root=document.getElementById('root')  
        //2.定义函数组件
        function PropsReact(props){
            if(props){
                return (
                    <div>
                    <p>Props参数值是：{props.name},{props.age}</p> {/*name是参数名*/}
                    </div>
                )
            }else{
                return <span>props参数为空</span>
            }
        }

        //3.渲染组件
        ReactDOM.render(<PropsReact name='乔峰' age='25' />,root)
    </script>
</body>
</html>

在这里插入图片描述

3、props属性是只读的

虽然React Props很好用，但在使用. 上是有限制的。React框架规定Props是不能被修改的，也就是说Props是个只读的参数。例子中的增加了只读属性(readOnly)

<script src="../react的js库/react.development.js"></script>
    <script src="../react的js库/react-dom.development.js"></script>
    <script src="../react的js库/babel.min.js"></script>
</head>
<body>
    <div  id="root"></div>
    <script type="text/babel">
        var root = document.getElementById('root')

        function FormTitle(){
            return <h3>用户登录</h3>
        }

        function UserName(props){
            return (
                <p>
                    用户ID：<input type="text" value={props.userName}/>  
                </p>
            )
        }

        function UserPwd(props){
            return (
                <p>
                   密码：<input type="password" value={props.userPwd} />    
                </p>
            )
        }

        function Login(){
            return(
                <div>
                    <FormTitle/>
                    <UserName userName='张三'/> 
                    <UserPwd userPwd='123456'/>   
                </div>
                

            )
        }

        ReactDOM.render(<Login/>,root)
    </script>
</body>
</html>

在这里插入图片描述

二、React类组件的props属性

类组件默认含有props属性
在类组件的构造方法中必须使用super(props)完成父类的构造
可以通过’组件名.defaultProps={default：值}’ 方式来设置类组件的props属性的值

<script src="../react的js库/react.development.js"></script>
    <script src="../react的js库/react-dom.development.js"></script>
    <script src="../react的js库/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let root=document.getElementById('root')

        //类组件
        class DefaultReact extends React.Component{
            constructor(props){
                super(props)
                console.log(props);
            }
            render(){
                return (
                    <div>
                        类组件的默认值:{this.props.default}    
                    </div>
                )
            }
        }

        DefaultReact.defaultProps = {
            default:'西安邮电大学'
        }

        ReactDOM.render(<DefaultReact/>,root)
    </script>
</body>
</html>