React原生外包函数

Question

考虑以下情况，我有一个可重用的组件，让我们称它为myComponent，myComponent被使用了两次，它还有一个名为whenAccepted的道具，在我使用该组件的两个地方，我都运行相同的函数。我想把它外包到一个新文件中，这样我就可以导入并运行它，而不是编写两次。对此有什么建议吗？我在考虑HOC的，但我不确定它是否可以工作，因为我需要更多的东西，因为运行它的函数还需要一些数据存在于我使用它的两个文件中。你将如何处理这些反应堆？

Answer 1

如果我没理解错的话，通过“我运行相同的函数，我想把它外包到一个新的文件中”，你想提取一个要在多个组件中使用的函数。下面是我如何做到这一点的。

简化的项目结构：

./mySharedFunction.js
./MyComponent.js
./MyComponent2.js

创建在多个组件中使用的函数

// mySharedFunction.js

export default const mySharedFunction = (data) => {
 ...do stuff...
}

导入函数并在构造函数中使用它。

// MyComponent.js

import mySharedFunction from './mySharedFunction.js

export default class MyComponent extends Component {

  constructor(props) {
    super(props)
    mySharedFunction(data)
  }

  ...some code...

  render() {
    ...
  }
}

导入函数并在类方法中使用它。

// MyComponent2.js

import mySharedFunction from './mySharedFunction.js

export default class MyComponent2 extends Component {

  ...some code...

  classMethod = (data) => {
    mySharedFunction(data)
  }

  render() {
    ...
  }
}

希望这能有所帮助