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

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

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

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

Answer 1

您可以使用以下语法

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

在这里，您可以像子组件一样从子组件传递元素

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

Answer 2

这是一个示例，说明如何将函数传递给组件并运行它们。我们将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>