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

  • Z时代
  • 2024-01-10
  • 分类：问答

比方说，你有以下功能（或更多）：传递的功能清单，组件通过道具

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

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

回答：

您可以使用下面的语法

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

以上是 传递的功能清单，组件通过道具 的全部内容， 来源链接： utcz.com/qa/263858.html

回到顶部