传递的功能清单，组件通过道具

问题描述：

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的子节点），以及其他参数工作。

任何帮助，将不胜感激。谢谢！

当你尝试的第一个解决方案，你是怎么计算它不会工作方式还大吗？ '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');

答

这里是你展示如何通过功能组件和运行它们的例子从子组件传递元素。我们将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>

传递的功能清单，组件通过道具

相关推荐