验证输入HOC与组合

时间:2017-11-19 16:28:27

标签: reactjs design-patterns higher-order-components

我正在使用react和redux。

我的状态较少的文字输入。我可以使用

<TextInput error={true} /> // Uncontrolled and staelss

所以我可以通过将它们订阅到redux商店来使用错误/成功...道具。并且我想提供一种在本地状态下进行验证的方法,用于在redux存储中保持该状态的一些简单情况。

所以我想到了两种方法。

方法1 HOC withValidation

const SomeInput = props => <TextInput label="Something" />;
const SomeInputWithValidation = withValidation(Input,(input) => {
   //perform validation logic
   return validation result.
  }); // Controlled ans stateful. 

方法2创建另一个消耗无状态,不受控制的版本的组件

class ActiveTextInput extends React.Component { // Controlled and stateful.  

     //Do something with satate.

  render(){

     return <TextInput ...control props with state />;
  }
}

请帮我选择最佳抽象方式。谢谢。

0 个答案:

没有答案