資源日歷 踩坑記(一)

• 當我遇到了一個很坑的跨域問題
• 使用margin: 0 auto的前提
• 如何給react組件添加多個class
• 如何重寫antd的樣式
• 關於CSS3不熟悉的用法
• 如何使用babel來測試ES6
• ES6相關
• react相關
• reducer相關
• 后端
• ESLINT規則集
  • ESLINT 數組部分實踐
• 數組常用方法實踐

當我遇到了一個很坑的跨域問題

問題描述: 不知道為什么，就是跨域，我檢查了端口號以及域名，都沒有問題，但是還是跨域。

原因: BACKEND_URL='localhost:3000', 這里指定了地址，但是沒有指定協議，所以跨域。應該是http://localhost:3000。

總結: 屬於同一個域，必須包括 協議、域名、端口號都一致，否則跨域。

使用margin: 0 auto的前提

如果想要使用margin: 0 auto;，它有以下幾個前提:

1. 必須是塊級元素, inline-block元素也不行。
2. 必須指定寬度。
3. 不能使用定位屬性以及浮動。

如何給react組件添加多個class

這里介紹幾種方法:

1. 簡單拼接字符串: <div className={class1 + ' ' + class2}></div>
2. 使用es6字符串模板拼接字符串: <div className={${class1} ${class2}}></div>
3. 使用classnames, 先導入模塊import classnames from 'classnames', 然后使用<div className={classnames(class1, class2, class3)}></div>, 推薦使用這種。

如何重寫antd的樣式

這里介紹兩種方法:

1. 直接修改組件的類型，如:<Icon className="test-class"/>
2. 使用global修改，這種情況，一般需要在組件外面包一層，但是不推薦這么用，因為版本升級可能導致意想不到的結果，比如:

.footer :global(.ant-input-group-adoon) {
  color: red;
}

關於CSS3不熟悉的用法

1. box-shadow合成寫法以及所表達的意思: none | [inset? && [<offset-x> <offset-y> <blur-radius>?<spread-radius>?<color>? ]]#, 默認陰影在邊框外, 使用inset后，陰影就會在邊框內。blur-radius值只能為正，值越大，模糊面積越大，陰影就越大越淡。spread-radius值可正可負，正值，陰影擴大，負值，陰影縮小。

2. border-radius分開寫法順序: border-top-left-radius: 4px。

如何使用babel來測試ES6

1. 安裝babel-preset-es2015, 使用命令cnpm install --save-dev babel-preset-es2015
2. 配置.babelrc文件

{
  "presets": ["es2015"]
}

3. 安裝babel-cli，使用命令cnpm install babel-cli -g
4. 使用babel-node, 它是babel-cli自帶的工具，使用命令babel-node main.js來測試main.js文件

ES6相關

1. 當導入默認模塊時，直接import test from './test'
2. 當導入非默認模塊時， 需要加上括號，如: import { test } from './main'
3. ...array, 如果const array = [1, 2, 3];,這個擴展運算符的計算結果是1 2 3, 它們之間沒有逗號。
4. array.indexOf('a')這是一個坑，如果要判斷是否有的話，應該用是否大於-1來判斷，而非直接if (array.indexOf('a') {}), 應該用if (array.indexOf('a') > -1)來判斷。
5. splice()方法，返回的是一個新數組，舉例來說，如果使用的是刪除，那么返回的就是被刪除的元素組成的數組。而被刪除元素的數組自然也就少了元素。
6. ES6實現數組去重的方法: projectName = [...new Set(projectName)]

react相關

1. antd的日歷組件，如何實現點擊日歷，改變點擊的那天的顏色，這個時候要轉變操作DOM的思想，要向react上轉，是通過數據來的，因此我們要考慮到使用state或者說是reducer之類的。

2. antd的form組件，如果要驗證的話，兩種方法，要么寫在validator里面, 要么最后提交表單的時候統一驗證。如果在統一表單的時候統一驗證，this.porps.form.validateFields(err, value){}, 這個函數里，如果有錯，一定要return。if (err) {return;}, 不然，最后界面上不會提示出錯。

3. 報錯: Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of ProjectCalendar., 這個報錯我遇到了多次，原因是自己引入模塊不小心寫錯了，比如寫了import { Input } from 'react', 實際上應該是: import { Input } from 'antd'

4. 像報這樣的錯: Object is undefined, 一定要好好檢查是不是導入模塊錯了，或者是忘了導入模塊。

5. 在使用antd的AutoComplete組件時，想要實時獲取輸入框里的值, 可以直接使用onSelect(value)方法，value就是實時的值，但是我的需求是實時獲取2個AutoComplete組件里的值，我用到了form表單里的getFieldValue()方法，但是在使用的過程中，發現這樣並不可以，這個方法獲取的並不是實時的，而是上一次onChange或者onSelect后的值。最終的解決辦法是，使用state, 調用onSelect或onChange方法后，把當前的值存入state里，並在setState()的方法的回調函數里，進行判斷2個值，因為2個值都存到state里面的，所以就可以獲取2個AutoComplete里的實時的值了。

6. 使用antd的mention組件，報錯toContentState is not a function, 原因，版本問題。

reducer相關

1. 最外層reducers將所有container的reducer組合起來了。

后端

1. 表里有個字段設置了unique, 但是在自己插入的時候，那個字段又不是唯一的，所以mongodb報錯:11000。就算在代碼里將unique去掉，但是它仍然沒有反映到數據庫里，所以需要將表刪除了，重新創建。

2. 查詢請求的時候報錯，大概意思是不知道請求的方法是GET還是HEAD, 原因是schema里面的那個validator(), 里面不需要返回任何數據。

3. Missing or undefind handler, 這是由於方法沒有添加到prototype里去。

4. 當有可能是更新操作，有可能是創建操作的時候，是后端將create以及update的API都提供了，然后前端進行判斷，來判斷是更新操作還是插入操作。而不是前端一個函數，后端來判斷!!!

ESLINT規則集

• no-trailing-spaces, 最后面不能跟空格。
• the closing bracket must be aligned with the line containing the open tag., 閉合括符必須和開標簽對齊。
• using string literals in ref attribute is deprecated, 在ref中使用字符串文字已經被棄用, 這個時候應該使用這種:

constructor() {
  super();
  this.handleClick = this.handleClick.bind(this);
}

handleClick() {
  const node = this.btnRef;
}

return (
  <div>
    <div onClick={this.handleClick}><span ref={(el) => {this.btnRef = el;}}></span></div>
  </div>
);

• unexpected parentheses around single function argument having a body with no curly braces arrow-parens, 大概意思是如果箭頭函數的參數只有一個，那么不需要用()包括起來，其他任何情況都需要用()包括起來。
• arrow function should not return assignment, 箭頭函數禁止返回賦值，也就是在return的時候，禁止賦值語句。
• visible, non-interactive elements should not have moue or keyboard listeners jsx-ally/no-static-element-interactions, 非可見，非交互元素，不應該就事件監聽。

common interactive roles include:

1. button
2. link
3. checkbox
4. menuitem
5. menuitemcheckbox
6. menuitemradio
7. option
8. radio
9. searchbox
10. switch
11. textbox

ESLINT 數組部分實踐

數組常用方法實踐

如果要過濾掉['abc', 'abx', 'abm', 'll', 'am']數組里只含有ab的元素如何操作?

const arr = ['abc', 'abx', 'abm', 'll', 'am'];
let newArr = arr.filter(item => (item.indexOf('ab') > -1));

// 可以進階為數組元素為對象
// 同理，還有其他需要過濾的，不需要專門寫判斷，直接return就可以了。
// 同理，map操作也是，不需要專門寫判斷, 格式也是和上面一樣。

如果想要匹配一個數組里的部分和元素和另一個數組的部分元素, 該如何操作？

const mentionArr = ['yuzf', 'mkmk', 'zhouh', 'yangh', 'klk'];
const users = [
  {
    name: 'yuzf',
    uid: '1',
  },
  {
    name: 'zhouh',
    uid: '2',
  },
  {
    name: 'yangh',
    uid: '3',
  },
  {
    name: 'yaocl',
    uid: '4',
  },
  {
    name: 'zhaozm',
    uid: '5',
  },
  {
    name: 'hwy',
    uid: '6'
  },
];

// 現在需求是這樣，mentionArr是用戶輸入的一堆數據，users是數據庫里的數據
// 我想將輸入的一堆數據去和users進行比對
// 如果users里存在那么mentionArr里的數據，就將users里面的uid給拿到
let uids = [];

// 1. 先將匹配的users給拿出來
// 2. 再將uid拿出來
users.filter(item => (mentionArr.includes(item.name))).forEach(item => (uids.push(item.uid)));
console.log(uids); // [1, 2, 3]