反應arrayMap utils

你好 React 開發者，

我創建了一個名為 reactMap 和 arrMap 的實用程序函數。你可以利用它。請在下面找到隨附的代碼

import React from 'react';

export function reactMap(arr, ifFn, elseFn) {
  if (!arr || !Array.isArray(arr) || arr.length === 0) {
    if (elseFn) {
      if (typeof elseFn === 'function') return elseFn();
      else return elseFn;
    } else return false;
  } else {
    if (ifFn) {
      if (typeof ifFn === 'function') {
        return React.Children.toArray(arr.map(ifFn));
      } else return React.Children.toArray(arr.map(() => ifFn));
    } else if (elseFn) return false;
    else return true;
  }
}

export function arrMap(arr, ifFn, elseFn) {
  if (!arr || !Array.isArray(arr) || arr.length === 0) {
    if (elseFn) {
      if (typeof elseFn === 'function') {
        const result = elseFn();
        if (result && Array.isArray(result)) return result;
      } else {
        if (elseFn && Array.isArray(elseFn)) return elseFn;
      }
    }
  } else {
    if (ifFn) {
      if (typeof ifFn === 'function') {
        return arr.reduce((acc, item, i) => {
          const value = ifFn(item, i, arr);
          if (value === false || value === undefined) return acc;
          else return [...acc, value];
        }, []);
      } else return arr.map(() => ifFn);
    } else if (!elseFn) return arr;
  }
  return [];
}

下面是片段供您了解使用方法，以及您可以使用的新結構替換舊結構。

這是舊結構

const arr = [1,2,3,4,5];

{arr && Array.isArray(arr) && arr.map(val=>
    <div key={val}>{val}</div>
)}

{arr && Array.isArray(arr) && arr.length===0 &&
    <div>No data to show</div>
}

{arr && Array.isArray(arr) && arr.length!==0 &&
    <div>arr has content</div>
}

這是新結構

import { reactMap } from 'utils/reactMapUtils';

const arr = [1,2,3,4,5];

{reactMap(arr, val => <div>{val}</div>, <div>No data to show</div>)}

{reactMap(arr) && <div>arr has content</div>}

通過使用上述結構，我們具有以下列出的優點。

1. 不再需要空檢查。
2. 我們不再需要傳遞 key 屬性了。
3. 我們也不必再單獨編寫數組空條件了。
4. 不必檢查arr是否包含數據。

arrMap 功能類似於 reactMap 但 arrMap 總是返回一個數組。它在我們想要操作數組內容時很有用