在React.js中創建可重用的幫助函數

我一直在爲我的最新應用程序構建React組件。我知道我可以重用幫助保持代碼乾爽的組件。在React.js中創建可重用的幫助函數

我想知道我是否可以重用函數。我知道必須有一種方法。

現在我有三個組件使用密碼驗證功能。

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)，那麼一切正常。

如果這不是最佳實踐，我會回到我正在做的事情上，但我假設我應該能夠導入函數以使生活更簡單，代碼更清潔！

來源

2017-10-19 Austin Stehling

你可以添加你試圖綁定的部分，但有錯誤嗎？ – bennygenel

輔助函數不應該依賴於他們被稱爲向（至少在我看來）組件的上下文。如果您需要在函數中使用某個參數，那麼將函數傳遞給函數總是一個更好的做法，因爲它有助於重用性。對於所有組件來說，狀態屬性的鍵可能不同，如果忘記對狀態屬性使用確切鍵，這可能會導致錯誤。

對於實施例

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

來源

2017-10-19 21:23:27 bennygenel

這工作。我的部分愚蠢的錯誤，直接複製方法到「this.state.password.length」助手，而不是通用。 –

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

來源

2017-10-19 21:10:08 zzzzBov

您的導入和導出都沒問題。您使用的命名導出/從ES6導入。

問題是試圖使用狀態，我相信。有什麼方法可以將使用密碼驗證的三個組件合併爲一個？或者刪除助手函數中的狀態引用，並將密碼作爲參數傳遞？這應該工作得很好。

來源

2017-10-19 21:28:38 callmeroot

這就是問題！ –

很高興你知道！ – callmeroot

在React.js中創建可重用的幫助函數

回答

相關問題