Question

是否可以在JS中将类方法拉出类？原谅我，我是功能范例，所以使用React迫使我使用类和this关键字（到目前为止）。我的一些组件变得越来越大，我不希望这样。

我在Google上找不到关于拉出方法或模块化课程的任何内容。

有没有办法可以说“从'./some_method.js'中获取此方法，并使用它，就好像它是在此文件中声明的那样＆amp; class ”而没有太多的侵入性变化？< / p>

如果做不到这一点，我假设将它们全部变为功能并将this传递给它们。但是，这感觉很脏。

我很欣赏一些关于我需要关注的关键字的指导，或者只是如何移出方法，所以我没有2000行文件需要20分钟才能找到

toggleFullMenu() {
    this.setState({ menuOpen: !this.state.menuOpen})
}

不按 CTRL + F 。这是我的动力。

我也想知道是否有关于这个与构造函数有关的专业提示。来自类继承范例人的任何警告？我只是想让这些方法独立存放在不同的文件中，但我不知道我在寻找什么。我从未见过有人在谈论这个。

编辑，我刚刚在MDN中找到了这个：

使用extends
进行子分类
extends关键字用于类声明或类表达式，以将类创建为另一个类的子类。

来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

这是我需要的吗？我该怎么做才能拉出一堆扩展？我不想要一个儿童班，这听起来不像我所描述的那样。

Answer 1

我可以说是的，您可以从组件中创建的其他类或文件中提取不同的方法。有很多不同的方法，这取决于你的偏好。你可以从非常简单到非常复杂的结构。

首先，您需要搜索和了解（如果您还不知道）require()和/或ES6 import和export。您可以创建独立的功能或对象，并将它们导入组件以使用它们。如果您具有在应用程序的不同组件或部分中使用的重复功能，那么这就是您的选择。

如果我评论将this作为参数传递，那就不像你在问题中说的那样。而不是传递this，将所需参数传递给函数并使用callbacks或Promises是可行的方法。您可以使用的另一种技术是bind函数到this。 ES6 arrow functions不需要bind，因为他们不会绑定自己的this。

如果您想要更复杂/更复杂，可以随时创建自己的classes。类结构可以提供执行更复杂事物的能力。 extends使您能够扩展（就像您可以从其名称中理解的）您的类方法与其他方法或用新的方法覆盖它们。例如，Beverages，Snacks，Meats可以是从Foods类扩展的类。创建自定义组件时，可以扩展React.Component，然后使用其方法。

要考虑的另一件事是拥有2000行组件让我觉得你还应该考虑将你的组件分成更小的块。父/子组件关系是React中最常见且受支持的结构。如果您使用此模式，您的代码将自动变小，并且更容易跟踪和管理。有很多关于如何将函数作为道具传递给子组件并在某些条件下使用某些参数运行它们然后操纵父组件状态的示例。您可以查找这些示例以便更好地理解。

我希望这些主题可以帮助您理解几件事并向您展示从哪里开始。

Answer 2

您可以使用Function.prototype.bind执行此操作，以便控制this的值。

在一个模块中，您可以导出＆＃34;方法＆＃34;作为常规功能：

// methods.js
export const toggleFullMenu = () => {
  this.setState({ menuOpen: !this.state.menuOpen })
}

在您的组件模块中：

import React from 'react'
import { toggleFullMenu } from './methods'

class SomeComponent extends React.Component {
  constructor () {
    super()
    this.toggleFullMenu = toggleFullMenu.bind(this)
  }

  render () {
    return <button onClick={this.toggleFullMenu}>Click Me</button>
  }
}

toggleFullMenu函数也可以绑定到其他上下文，因此您实际上可以跨不同的组件共享该方法。

编辑：绑定函数上下文有许多不同的方法，但不限于Function.prototype.bind。有关各种方法的说明，请参阅this chapter。

Answer 3

Webpack是一个功能齐全的JavaScript应用捆绑器。使用Webpack，您可以导入/导出代码：

export default class CustomerView {
    render() {
        ...
    }
}

和

import CustomerView from './CustomerView'

`

如何模块化JavaScript类（从主文件中拉出方法，将方法导入主文件）

3 个答案: