傳遞的功能清單，組件通過道具

比方說，你有以下功能（或更多）：傳遞的功能清單，組件通過道具

function hasValue(element) { 
    return (element.value && element.value.length); 
} 

function isLongerThan(element, minLength){ 
    return element.value.length > minLength; 
}

你如何試圖通過這些作爲功能組件通過道具列表？

我已經嘗試這樣的：

<MyInputComponent runThese={[hasValue, isLongerThan]} />

或者

<MyInputComponent runThese={[() => hasValue(),() => isLongerThan()]} />

但功能需要element參數（這是爲MyComponent的子節點），以及其他參數工作。

任何幫助，將不勝感激。謝謝！

來源

2017-12-18 o01

當你嘗試的第一個解決方案，你是怎麼計算它不會工作方式還大嗎？ 'if（this.props.runThese [0]（el））...'應該可以正常工作，因爲這些函數沒有訪問任何超出範圍的東西。函數的參數是在你調用它的時候設置的; ''函數要求元素參數「'沒有任何意義。 –

'[hasValue，isLongerThan]'很好，你只需要正確地調用函數。 –

@ChrisG @FelixKing第一個解決方案如何將'minLength'傳遞給'isLongerThan'？請記住'runThese'數組可能包含各種各樣的函數，所有這些函數都需要稍微不同的參數。 – o01

您可以使用下面的語法

<MyInputComponent runThese={[(element) => hasValue(element), (element) => isLongerThan(element, 23)]} />

在這裏，你可以像下面

const {runThese : [hasValue, isLongerThan]} = this.props; 
hasValue('el'); 
isLongerThan('el');

來源

2017-12-18 13:56:18

這裏是你展示如何通過功能組件和運行它們的例子從子組件傳遞元素。我們將2個函數hasValue和isLongerThan傳遞給一個數組。然後，我們設置一個onChange事件偵聽器來調用數組中的函數。如果所有輸入函數都通過（返回true），我們將輸入的狀態設置爲valid。

在isLongerThan的情況下，我們將創建一個函數來返回一個函數，因此我們可以設置minLength的值。

運行下面的代碼片段，然後在輸入中輸入一些值。你會看到false記錄，直到輸入值的長度大於3

function hasValue(element) { 
 
    return (element.value && element.value.length); 
 
} 
 

 
function isLongerThan(minLength) { 
 
    return function(element) { 
 
    return element.value.length > minLength; 
 
    } 
 
} 
 

 

 
class MyInputComponent extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     valid: false 
 
    } 
 
    } 
 

 
    handleChange = (event) => { 
 
    this.setState({ 
 
     valid: this.props.runThese.every(func => func(event.currentTarget)) 
 
    }) 
 
    
 
    } 
 

 
    render() { 
 
    return (
 
     <input type="text" onChange={this.handleChange} className={(this.state.valid ? 'valid': 'invalid')}/> 
 
    ) 
 
    } 
 
} 
 

 

 
ReactDOM.render(<MyInputComponent runThese={[hasValue, isLongerThan(3)]} />, document.getElementById("app"))

input { 
 
    outline: none; 
 
} 
 

 
.valid { 
 
    border: 3px solid green; 
 

 
} 
 

 
.invalid { 
 
    border: 3px solid red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

來源

2017-12-18 14:55:56

傳遞的功能清單，組件通過道具

回答

相關問題