反应-类中的自定义函数可以拆分为其他文件吗?

时间:2019-06-09 10:38:44

标签: 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()中编写内容并查看其上方的函数时,当我需要上下滚动时,它变得很烦人。所以我的问题是-我可以将自定义函数导出到其他文件中,然后将其导入到该特定类中吗?

2 个答案:

答案 0 :(得分:0)

种类繁多的反模式,但我想您可以做这样的事情:

组件:

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);
};

仅记得在组件中定义一个方法以使用导入的函数并将其绑定。

例如参见codeandbox:https://codesandbox.io/s/sharp-tharp-e1oom

答案 1 :(得分:0)

  

在render()中编写内容并查看其上方的函数时,当我需要上下滚动时,这很烦人。

具有窗口分割功能(或并排打开同一文件的功能)的编辑器应该足够好;)将方法分离为文件几乎不会影响编辑。


我认为您应该了解[关注点]分离为'Presentational and Container Components'(通常在单独的文件夹中)的概念/模式(有点历史,但恕我直言仍然有效)。

可能您应该了解context API-状态和方法提供者。

  

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

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


如果您更精确地描述模块管理和使用的结构/要求,也许我们可以提供比解决方案更合适的解决方案。