时间戳

首页 > 解决方案 > 将 props 直接传递给实用程序函数

javascript - 将 props 直接传递给实用程序函数

问题描述

我有以下常用的排序功能，

export const sortSelectOptions = (options, sortByKey = 'name', type) => {
  switch (type) {
    case 'alphaNumeric':
      return options
        .slice()
        .sort((a, b) =>
          Math.sign(
            parseInt(a.name.replace(/["]$/, ''), 10) -
            parseInt(b.name.replace(/["]$/, ''), 10)
          )
        );
    case 'numeric':
      return options.slice().sort((a, b) => (a.nominalSize > b.nominalSize ? 1 : -1));
    default:
      return sortBy(options, sortByKey)
  }
}

我正在调用上面的函数，如下所示，

options => sortSelectOptions(options, null, 'numeric')

对于我排序的数字类型nominalSize，现在我想直接从这里sortSelectOptions(options, null, 'numeric')作为道具传递这个字段。选项是对象数组，其中一个属性是nominalSize. 我正在寻找一种通用的排序功能。

任何人都可以让我知道如何将精确字段作为道具传递给通用函数以实现排序功能。

提前谢谢了

标签： javascriptarraysreactjssortingobject

解决方案

如果我理解正确，您希望访问值的逻辑在排序函数之外进行排序？

您可以通过其名称访问属性，如下所示：

export const sortSelectOptions = (options, sortByKey = 'name', type, fieldName) => {
  switch (type) {
    case 'alphaNumeric':
      return options
        .slice()
        .sort((a, b) =>
          Math.sign(
            parseInt(a.name.replace(/["]$/, ''), 10) -
            parseInt(b.name.replace(/["]$/, ''), 10)
          )
        );
    case 'numeric':
      return options.slice().sort((a, b) => (a[fieldName] > b[fieldName] ? 1 : -1));
    default:
      return sortBy(options, sortByKey)
  }
}

并调用它：

options => sortSelectOptions(options, null, 'numeric', 'nominalSize')

或者你可以概括这种模式并要求一个访问器函数，如下所示：

export const sortSelectOptions = (options, sortByKey = 'name', type, accessor) => {
  switch (type) {
    case 'alphaNumeric':
      return options
        .slice()
        .sort((a, b) =>
          Math.sign(
            parseInt(accessor(a).replace(/["]$/, ''), 10) -
            parseInt(accessor(b).replace(/["]$/, ''), 10)
          )
        );
    case 'numeric':
      return options.slice().sort((a, b) => (accessor(a) > accessor(b) ? 1 : -1));
    default:
      return sortBy(options, sortByKey)
  }
}

并调用它：

options => sortSelectOptions(options, null, 'numeric', x => x.nominalSize)
options => sortSelectOptions(options, null, 'alphaNumeric', x => x.name)

后一个版本还允许您访问深度嵌套的属性。

推荐阅读