Reactjs React-类中的自定义函数可以拆分为不同的文件吗？

我是一个新手（或者说我是一个面向后端的开发人员，所以一般来说是前端开发），到目前为止，用它进行开发没有任何问题。但是，我一直在试图找到一个答案，即在类中创建的函数（这些函数仅特定于该类）是否可以拆分到不同的文件并导入

让我举一个例子：

class ModuleInstance extends React.Component {
  // Initial module counter
  state = {
    moduleIndex: this.props.index,
    module: this.props.module,
    params: {
      single_assignment: this.props.module.assignments.length === 1 ? true : false,
      weightError: false,
      errorMessage: ''
    },
  }

  componentDidUpdate(prevProps) {
    if (this.props.assignments !== prevProps.assignments) {
      this.setState({
        params: {
          ...this.state.params,
          single_assignment: this.state.module.assignments.length === 1 ? true : false
        }
      });
    }
  }

  onRemoveModule = () => {
    this.props.onRemoveModule(this.state.moduleIndex);
  };

  render() {}
...

---

在本例中，我有一个自定义方法“onRemoveModule”。事实上，我有很多这样的“习俗”。当我在render（）中编写东西并查看上面的函数时，需要上下滚动，这会让人很恼火。所以我的问题是-我可以将自定义函数取出到另一个文件中，并将它们导入到特定的类中吗？

有点反模式，但我想您可以这样做：

组成部分： 记住在组件中定义一个方法来使用导入的函数并绑定它

例如，请参见codesandbox：

当我在render（）中编写东西并查看上面的函数时，需要上下滚动，这会让人很恼火

具有窗口拆分（或能够并排打开同一文件）的编辑器应该足够好；）将方法分离到文件中几乎对编辑没有影响

---

我认为您应该了解（有点历史性，但仍然有效）将[关注点]分离到（通常在单独的文件夹中）的概念/模式

可能您应该了解-state和方法提供程序

onRemoveModule=（）=>{
this.props.onRemoveModule（this.state.moduleIndex）；
};

当父级停止呈现此组件时，可能可以将此逻辑移到-called中。此外，重新定义此方法/处理程序可能是过早的优化


如果您能更准确地描述模块管理和使用的结构/要求，我们可能会提供更合适的解决方案（而不是解决方案）。
你好，somekid，刚刚给您写了一个答案，请告诉我这是否有帮助，或者您是否需要进一步解释。我们如何对功能组件做同样的事情？它是给foo未定义错误，而foo是我的外部函数。
import React from "react";
import { printName } from "./utils";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Bobby"
    };
  }

  printName = printName.bind(this);

  render() {
    return (
      <div>
        <button onClick={this.printName}>Click</button>
      </div>
    );
  }
}

export const printName = function() {
  console.log(this.state.name);
};