Question

如何在React中链接辅助方法？

我有一个带有辅助功能的helper.js文件。

ie：（ps：下面只是世俗的方法来说明我的问题）

//helper.js

export function handleLog(arg) {
  return console.log(`App current state is: ${arg}`);
}

export function handleSlice(arr) {
  return arr.slice(1, 2);
}

export function handleShuffle(arr) {
  return arr.sort(() => Math.random() - 0.5);
}

我可以将这些方法应用到我的React应用中，

import { handleLog, handleSlice, handleShuffle } from "./helpers";
...

class Heros extends PureComponent {
  constructor() {
    super();
    this.state = {
      heros: ["Hulk", "Thor", "Aquaman", "Stan Lee"]
    };
  }

  render() {
    const { heros } = this.state;
    const shuffledheros = handleShuffle(heros);
    const strongestHero = handleSlice(shuffledheros);
    handleLog(heros);

    /* How could I chain  */
    // const strongestHero = handleShuffle(heros).handleSlice(heros);

    return (
      <>
        <h1>Chained Helpers</h1>
        Strongest: {strongestHero}
      </>
    );
  }
}

如何链接例如： handleShuffle(heros).handleSlice(heros)，依此类推？

链接第二个方法时，它抛出： (0 , _helpers.handleSlice)(...).handleSlice is not a function

我尝试将助手重构为：

const helpers = {
 f1() { ...do something...; return this;},
 f2() { ...do something...; return this;}
}
export default helpers

那也不起作用。这是完整的code

Answer 1

您可以创建一个自定义类，该类可以将数组作为内部属性来实现：

class arrayUtils {
  constructor(items = []) {
    this._data = items;
  }
  reverseIt() {
    this._data.sort((a, b) => b - a)
    return this
  }
  getfirstTwo() {
    this._data.splice(0, 2)
    return this
  }
  printIt() {
    console.log('printing:', this._data)
    return this
  }
  get value() {
    return this._data
  }
}

// Create the instance
var arr = new arrayUtils([1, 2, 3, 4, 5])

// Chain subsequent calls (since we return `this`)
console.log('chain:', arr.reverseIt().printIt().getfirstTwo().printIt())

// get the value
console.log('value:', arr.value)

您可以看到它working here

专门针对React，您可以将其放在单独的util文件中的单独类中，只需export default就可以了：

class helpers ...

export default helpers

然后导入并创建一个实例：

import helper from './helper';

// Create the instance
var arr = new helper([1, 2, 3, 4, 5])

Answer 2

首先：Array.sort不返回任何数组。

您应该重写函数handleShuffle

export function handleShuffle(arr) {
  return arr.concat().sort(() => Math.random() - 0.5);
}

第二：您尝试调用数组函数，但是Array不包含任何handleShuffle或handleSplice函数。因此，您应该逐个功能运行：

const strongestHero = handleShuffle(handleSlice(heros));

Your forked example

Answer 3

另一个解决方案：创建Array原型的方法：

Array.prototype.handleSlice = function() {
    return this.slice(1, 2);
};

Array.prototype.handleShuffle = function() {
    return this.concat().sort(() => Math.random() - 0.5);
};

因此您可以级联地执行方法。

heros.handleShuffle().handleSlice();

但是我认为对这些简单函数进行数组扩展不是最好的主意。

React-如何创建链接的级联助手功能

3 个答案: