小道具

Question

を通じてコン​​ポーネントに関数のリストを渡すと、あなたは、以下の機能（またはそれ以上）を持っているとしましょう：

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()]} /> 

をしかし、機能が動作するように、他のパラメータと一緒に、（MyComponentのの子ノードである）elementパラメータを必要とします。

ご協力いただければ幸いです。ありがとう！あなたは構文

ここ

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

次使用することができます

Answer 1

、あなたはここで

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

Answer 2

を次のように子コンポーネントから要素を渡すことができますが、コンポーネントに関数を渡すと、それらを実行する方法を示す例です。 hasValueとisLongerThanの2つの関数を配列に渡しています。その後、配列内の関数を呼び出すようにonChangeイベントリスナーを設定しました。すべての入力関数が成功すると（trueを返す）、入力の状態をvalidに設定します。

isLongerThanの場合、関数を返す関数を作成するので、minLengthの値を設定できます。

以下のスニペットを実行して、入力に値を入力します。入力値が、どのようにあなたはそれがそのように動作しません理解しましたあなたが最初のソリューションを試みた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>