javascript - 通过 props 将函数列表传递给组件

Question

假设您具有以下功能(或更多功能):

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

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

您会如何尝试通过 props 将这些作为函数列表传递给组件？

我尝试过类似的事情:

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

或者

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

但是这些函数需要 element 参数(它是 MyComponent 的子节点)以及其他参数才能工作。

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

以下示例展示了如何将函数传递给组件并运行它们。我们在数组中传递两个函数:hasValue 和 isLongerThan。然后，我们设置一个 onChange 事件监听器来调用数组中的函数。如果所有输入函数都通过(返回true)，我们将输入的状态设置为valid。

对于isLongerThan，我们将创建一个函数来返回一个函数，因此我们可以设置minLength值。

运行下面的代码片段，然后在输入中输入一些值。在输入值的长度大于 3 之前，您将看到记录的 false。

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>