（1）獲取對象的屬性，并且判斷對象屬性是否存在

舉例：

let test = {name:’22’,age:67,sex:’man’}; 獲取age屬性值；

簡單寫法：

if(test && test.age ){console.log(test.age); }

優化寫法：

let test = {name:’22’,age:67,sex:’man’}; console.log(test && test.age); // 直接獲取age的值；

---

（2）引入圖片（圖片都放在assects文件夾下面）

配置webpack @為src的路徑，通過import引入

import emptyImg from '@/assets/imgs/defaultEmpty.png';

---

（3）PropTypes進行類型檢查

對Component設置propTypes屬性，可以為Component的props屬性進行類型檢查

import React from 'react'; import PropTypes from 'prop-types';class MyComponent extends React.Component {render() {// 利用屬性做更多得事} }MyComponent.propTypes = { // 可以定義一個屬性是特定的JS類型 //Array,Boolean,Function,Number,Object,String,Symbol optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol,//指定類型為：任何可以被渲染的元素，包括數字，字符串，react 元素，數組，fragment。 optionalNode: PropTypes.node,// 指定類型為：一個react 元素 optionalElement: PropTypes.element,//你可以類型為某個類的實例，這里使用JS的instanceOf操作符實現 optionalMessage: PropTypes.instanceOf(Message),//指定枚舉類型：你可以把屬性限制在某些特定值之內 optionalEnum: PropTypes.oneOf(['News', 'Photos']),// 指定多個類型：你也可以把屬性類型限制在某些指定的類型范圍內 optionalUnion: PropTypes.oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message) ]),// 指定某個類型的數組 optionalArrayOf: PropTypes.arrayOf(PropTypes.number),// 指定類型為對象，且對象屬性值是特定的類型 optionalObjectOf: PropTypes.objectOf(PropTypes.number),//指定類型為對象，且可以規定哪些屬性必須有，哪些屬性可以沒有 optionalObjectWithShape: PropTypes.shape({optionalProperty: PropTypes.string,requiredProperty: PropTypes.number.isRequired }),// 指定類型為對象，且可以指定對象的哪些屬性必須有，哪些屬性可以沒有。如果出現沒有定義的屬性，會出現警告。 // 下面的代碼optionalObjectWithStrictShape的屬性值為對象，但是對象的屬性最多有兩個，optionalProperty 和 requiredProperty。 //出現第三個屬性，控制臺出現警告。 optionalObjectWithStrictShape: PropTypes.exact({optionalProperty: PropTypes.string,requiredProperty: PropTypes.number.isRequired }),//加上isReqired限制，可以指定某個屬性必須提供，如果沒有出現警告。 requiredFunc: PropTypes.func.isRequired, requiredAny: PropTypes.any.isRequired,// 你也可以指定一個自定義的驗證器。如果驗證不通過，它應該返回Error對象，而不是`console.warn `或拋出錯誤。`oneOfType`中不起作用。 customProp: function(props, propName, componentName) {if (!/matchme/.test(props[propName])) {return new Error('Invalid prop `' + propName + '` supplied to' +' `' + componentName + '`. Validation failed.');} },//你也可以提供一個自定義的驗證器 arrayOf和objectOf。如果驗證失敗，它應該返回一個Error對象。 //驗證器用來驗證數組或對象的每個值。驗證器的前兩個參數是數組或對象本身，還有對應的key。 customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {if (!/matchme/.test(propValue[key])) {return new Error('Invalid prop `' + propFullName + '` supplied to' +' `' + componentName + '`. Validation failed.');} })

限制單個子元素
使用 PropTypes.element 你可以指定只有一個子元素可以被傳遞給組件。

//將children限制為單個子元素。 Greeting.propTypes = {name: PropTypes.string,children: PropTypes.element.isRequired };

如果如下方式引用Greeting組件：

//傳了兩個子元素給組件Greeting那么，控制臺會出現警告 <Greeting name={'world'}><span>子元素1</span><span>子元素2</span></Greeting>

警告如圖：

指定默認屬性值

你可以給組件分配一個特殊的defaultProps屬性。

//給Greeting屬性中的name值指定默認值。當組件引用的時候，沒有傳入name屬性時，會使用默認值。 Greeting.defaultProps = {name: 'Stranger' };

---

(4) SSR 和CSR的區別

參考文章： https://blog.csdn.net/u012036171/article/details/88833200

---

(5) React 組件屬性賦值的展開運算符應該怎么理解?

舉例：

// 原句 data = {name: "張三", age: 12}; <Person {...data}></Person>// 相等于 <Person name={data.name} age={data.age}></Person>

總結

以上是生活随笔為你收集整理的获取对象的属性，并且判断对象属性是否存在的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。