react的三大属性——props

最新推荐文章于 2024-05-17 08:00:00 发布

筱瑶吖

最新推荐文章于 2024-05-17 08:00:00 发布

阅读量750

点赞数

分类专栏： react 文章标签： react.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_58073806/article/details/129212817

版权

react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章详细阐述了React中props的概念，作用以及使用方法，包括如何通过props从外部向组件传递数据，props的只读特性，以及如何使用propTypes和defaultProps来设定属性类型和默认值。同时，文章提到了在类式组件和函数式组件中如何处理props，并强调了在构造函数中正确使用props的注意事项。

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

一、对props的理解

每个组件对象都会有props(properties的简写)属性

组件标签的所有属性都保存在props中

二、props的作用

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

注意: 组件内部不要修改props数据

三、具体用法

首先每个组件定义的时候都要继承React.Component，所以每个组件实例自身都会有props属性，是一个对象，react会自动的将组件标签中的所有属性自动的归纳于组件实例的props属性中作为其属性的形式存在

ReactDOM.render(<Person name="jerry" age={19}  sex="男"/>,document.getElementById('test1'))
//注意：在给组件标签的属性赋值的时候，如果值不是字符串类型，需要用{}包裹，否则会自动的将其识别为字符串类型

对于多个数据，react提供了{...obj}的用法

const p = {name:'老刘',age:18,sex:'女'}
ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))

四、对标签属性进行限制——propTypes

在react中给传入的属性加规则时，需要使用propTypes来限制，react底层会在创建组件实例的时候寻找propTypes，看是否有限制；

对于下每个属性限制的类型要用到React.PropTyres来限制

简单来说就是，propTypes用来标志这个组件是否有属性类型限制，具体有什么限制要用React.PropTypes来标志

注意：React.PropTypes这个用来标记数据类型的时候String类型用React.PropTypes.string，会变成小写

注意：React.PropTypes这个在react的15.xxx的版本的时候一直在维护，但是在16版本之后就被弃用了，因为这个直接挂载在React身上会导致React过于庞大，并且也不是每个组件都需要进行类型限制，所以16版本后就不再在React上了，需要另行引入prop-types包，用于对组件的标签属性进行限制

补充：引入react.development.js，全局会多了一个React对象；引入react-dom.development.js，全局会多了一个ReactDOM的对象；引入prop-types.js，全局对多了一个PropTypes对象

对传入的标签属性进行数据类型的限制

Person.propTypes = {
    name:PropTypes.string//限制Person组件实例的name属性为字符串
    sex:PropTypes.string,//限制sex为字符串
    age:PropTypes.number,//限制age为数值
    speak:PropTypes.func,//限制speak为函数
//注意每个类型的写法，全部变成小写字母开头，并且函数要写成func
}

对传入的标签属性进行默认值的限制，如果不传递，将给其一个默认值——defaultProps

//指定默认标签属性值
Person.defaultProps = {
    sex:'男',//sex默认值为男
    age:18 //age默认值为18
}

对传入的标签属性进行必要性的限制，特定标签属性必须要传值——isRequired关键字

Person.propTypes = {
    name:PropTypes.string.isRequired, //限制name必传，且为字符串
}

props是只读的不允许修改

五、props的简写方式，使用类中的state关键字，将其定义成类原型的属性

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

//指定默认标签属性值
static defaultProps = {
    sex:'男',//sex默认值为男
    age:18 //age默认值为18
}

六、类式组件中的构造器与props

类中写构造器传与不传props的区别

在React组件挂载之前，会调用他的构造函数，在为React.Component子类实现构造函数时，应在其他语句之前调用super(props)否则，this.props在构造和函数中可能会出现未定义的bug

构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props

类中构造器的作用

通常在React中，构造函数仅用于以下两种情况：

通过给this.state赋值对象来初始化内部state

为事件处理函数绑定实例

//在构造函数中解决事件回调this指向问题
this.changeWeather = this.changeWeather.bind(this)

在constructor()函数中不要调用setState()方法。如果你的组件需要使用内部state，请直接在构造函数中为this.state赋值初始state

总结：类中的构造器能省略就省略

七、函数式组件使用props

//创建组件
function Person (props){
    const {name,age,sex} = props
    return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age}</li>
            </ul>
        )
}
Person.propTypes = {
    name:PropTypes.string.isRequired, //限制name必传，且为字符串
    sex:PropTypes.string,//限制sex为字符串
    age:PropTypes.number,//限制age为数值
}

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