2025年react组件三大属性（react组件开发规范）

科技前沿 • 2025-05-05 10:26 • 阅读 47

大家好，我是讯享网，很高兴认识大家。

这是我参与8月更文挑战的第15天，活动详情查看:

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

接收组件标签传入的参数。

组件标签中传参：字符的可以使用引号，数值使用{数字}的形式。

如果觉得写多个 this.props 比较麻烦，我们可以解构出三个变量。

当我们想渲染出多个列表的时候（当然这不是很好），可以通过ReactDOM.render 创建多个Person的实例对象。

当需要传递的参数有十几二十个的时候怎么办？我们不可能都写在标签中。

并且这些要传递的参数，正常来说都是走ajax请求后端接口的。

我们声明一个对象，然后在标签中用{…}来传递参数。

展开数组

连接数组

函数传参

当参数是不固定的情况下怎么办?此时将函数的参数改为

数组求和 reduce

reduce是有返回值的

讯享网

复制对象同时修改

这是个合并操作

思考一下

⚠️ ES6语法中

三点运算符不能展开一个对象。但是可以复制一个对象：用大括号包着 {…person}

⚠️ React语法中

再看一下我们上面的代码，现在的 {} 和 ES6表达的是一个意思吗？

当然不是，现在的 {}表示的是我要写 js代码了。所以我们传递的参数就是 …p。

这是因为经过了Babel和react的处理。且只适用于标签属性的传递

我们想让每个人的年龄在展示时都加一

在渲染的时候都加一，但是如果对象中的age是字符串类型

我们的效果就变成了字符串的拼接

有一个问题，我们不使用批量传参数，我们还用之前的单个传参数

这样可以吗？当然不可以。那么要传递数值型的参数怎么办？是不是只有js才会有数值型这个概念。所以 , {}代表我要js代码了。

当我们想要组件的传参限制类型时、当传空给默认值时、当某个参数必须传时。我们需要在哪里做限制呢？在类的实例上首先引入PropTypes

限制参数类型

注意区分两个 propTypes 的大小写

接下来把我们的 name 传数值型的参数，报错了（期待字符串但是得到的是数值）。虽然报错但是还是保证了页面的正常显示。

限制必填

在后面写入关键字 isRequired

当我们不传递参数 name 时，会报错

默认值

defaultProps 属性

当我们不传递 name 参数时就会默认 tom

对函数限制

注意函数类型是 func 并不是 function

完整代码

props 是只读的。当我们再去修改 props 中的值时会报错。

defaultProps、propTypes都是在给类的自身加属性。那么能给它们写到类的内部吗？将 defaultProps、propTypes 剪切到类的内部，将 Person.propTypes 改成 static 关键字。有了static关键字，就不会再加给类的实例，而是加给类。