在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'

當我嘗試在我的構造函數中綁定“this”時，我不斷收到錯誤“passwordValidation is a function”。

如果我在輸入標記中調用它，我將“無法讀取未定義的屬性狀態”。

只是想看看我哪里出錯了。 如果我在我的類中定義並添加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...')