Question

我一直在为我的最新应用构建React组件。我知道我可以重复使用有助于保持代码干净的组件。

我想知道我是否可以重用功能。我知道必须要有办法。

现在我有三个使用密码验证功能的组件。

passwordValidation() {
  const length = this.state.password.length;
  if (length > 7) return 'success';
  else if (length > 4) return 'warning';
  else if (length > 0) return 'error';
}

我创建了一个帮助文件--helpers.jsx并添加了：

export function passwordValidation() {
  const length = this.state.password.length;
  if (length > 7) return 'success';
  else if (length > 4) return 'warning';
  else if (length > 0) return 'error';
}

然后我将其导入我的组件

import { passwordValidation } from '../helpers.jsx'

当我尝试在我的构造函数中绑定“this”时，我一直收到错误“passwordValidation不是函数”。

如果我在输入标签中调用它，我会“无法读取未定义的属性状态。”

试着看看我哪里出错了。如果我在课堂上定义并添加this.passwordValidation = this.passwordValidation.bind(this)，那么一切正常。

如果这不是最佳做法，我会回到我正在做的事情，但我假设我应该能够导入函数以使生活更轻松，我的代码更清洁！

Answer 1

辅助函数不应该依赖于它们被调用的组件的上下文（至少在我看来）。如果你需要在函数中使用一些参数，那么函数总是更好的做法，因为它有助于重用性。对于所有组件，state属性的键可能不同，如果您忘记对state属性使用确切键，这可能会导致错误。

例如

export function passwordValidation(password) {
  const length = password.length;
  if (length > 7) return 'success';
  else if (length > 4) return 'warning';
  else if (length > 0) return 'error';
}

如果我改变上面的功能，我可以使用下面给出的所有例子。

import { passwordValidation } from '/path/to/helper/functions.js';

console.log(passwordValidation(this.state.password));
console.log(passwordValidation(this.state.confirmPassword));
console.log(passwordValidation(this.props.password));
console.log(passwordValidation(someFetchedObject.user.password));

Answer 2

您的进出口都没问题。您使用ES6中的命名导出/导入。

我相信问题是试图使用州。有没有办法可以使用密码验证将三个组件合并为一个？或者删除辅助函数中的状态引用，并将密码作为参数传递？这应该工作得很好。

Answer 3

import { passwordValidation } from '../helpers.jsx'

基本上说：

var { passwordValidation } = (function passwordValidation () {...});

passwordValidation是一个函数，函数是JS中的对象，所以它实际上是在寻找：

var passwordValidation = (function...(){...}).passwordValidation;

相反，只需将函数直接分配给passwordValidation：

import passwordValidation from '../helpers.jsx'

如果您处于require可用的环境中，请直接致电require。

const passwordValidation = require('...resource...')

在React.js中创建可重用的助手函数

3 个答案: