如何验证 React.propTypes 中的输入以获取自定义函数的输入？

Posted 2023-02-21

【中文标题】如何验证 React.propTypes 中的输入以获取自定义函数的输入？

【英文标题】：How to validate input like in React.propTypes for the input of custom functions?

【发布时间】：2014-04-24 21:15:18

【问题描述】：

我真的很喜欢基于 React 风格强制/验证数据，但我发现很难将它们的类与库分离以更通用。我怎么可能做到？ （注意不是表单验证）

我给一个函数一个对象，我希望该函数根据“模式”验证该输入：

 function(input)
      validate(input, 
           test: Validator.Number
      )
 

请注意，它还支持嵌套数组和对象验证。 http://facebook.github.io/react/docs/reusable-components.html

我尝试过https://github.com/molnarg/js-schema，但扩展了原生对象Number.min(0).max(5),

【问题讨论】：

对不起.. 那我该怎么办？无论如何，我认为这可能对其他人有所帮助。

我是否应该问它“如何像 React 道具类型一样验证...”才能不被关闭？

我已经更新了我的问题...如果没有人在这里回复，我会放在那里。

好的，我已经更新了正文。

好多了。我撤回了我的近距离投票，我将清理 cmets。 :-)

【参考方案1】：

当时，PropTypes 实际上被很好地隔离了。最近有一个小更新，你现在应该可以更独立地使用它们了：https://github.com/facebook/react/blob/master/src/core/ReactPropTypes.js

用法如下：https://github.com/facebook/react/blob/master/src/core/ReactCompositeComponent.js#L947

告诉我这是否有帮助！

【讨论】：

我稍后会检查它，现在我有点忙于其他事情所以我不知道它是否有效（：希望我稍后不要忘记回复你

【参考方案2】：

我不知道我是否正确理解了这个问题，并且似乎与 javascript 以及如何编写和模块化 javascript 代码更相关，您可以使用 browserify http://browserify.org/，在 js 文件中声明您的模型（架构）并在你的反应文件包括它......他们调用 Duck(myDuck) 并检查布尔结果以验证输入......如果它是真的添加到你的状态（或任何你想要的）并且如果它失败处理这个......

您也可以尝试混合 facebook.github.io/react/docs/reusable-components.html，但它似乎与组件中的“扩展”功能更相关，尽管我认为您可以完美地使用它们...

  var schemas = DuckValidation : schema(age: ....), CatValidation : schema()

  var myComponent = React.createClass(
     mixins: [schemas], // Use the mixin

     onSubmitCat: function(obj) 
        this.CatValidation(obj) ? this.sendToServer(obj) : this.showError()
        return false
     ,

     render: function() 
       .....
     
 );

虽然我认为如果您不想扩展组件的功能，则使用 browserify 是更好的选择（检查是否比使用 this.CatValidation，因为您的组件是使用该方法扩展的）

【讨论】：

这不是我要找的。我正在寻找一个库或一种方法来验证某些功能的某些输入。只是泛型函数，与 React.js 无关。我希望这个库像 React.js PropsTypes。