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

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' 

我不断收到错误“passwordValidation不是函数“当我尝试绑定”这个“在我的构造函数。

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

只是想看看我要去哪里错了。如果我在我的班级中定义它，并添加this.passwordValidation = this.passwordValidation.bind(this)，那么一切正常。

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

Answer 1

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

对于实施例

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

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...') 

Answer 3

您的导入和导出都没问题。您使用的命名导出/从ES6导入。

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