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



这是我参与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关键字，就不会再加给类的实例，而是加给类。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/72442.html