反应组件构造函数

时间:2018-02-14 12:06:27

标签: javascript reactjs ecmascript-6 react-proptypes

如果我想确保反应组件的构造函数作为prop传递,我该如何使用PropTypes模块验证它?

例如:

// Child Components
class MyComponent extends React.Component {}
const MyComponent2 = (props) => null; // stateless react component

// Container
class Container extends React.Component {}
Container.propTypes = { child: /*validator*/ }

// creating container class with MyComponent
<Container child={MyComponent}/> // validation succeeds

// creating container class with MyComponent2
<Container child={MyComponent2}/> // validation succeeds

// creating container class with random function
const func = function add(x,y) { return x+y; }
<Container child={func}/> // validation fails

这样的事情是否可能,因为无状态组件只是函数而没有与React.Component的明确链接?

注意:我不打算将反应组件传递到Container(可以使用PropTypes.element进行验证)。我正在寻找传递这种组件的构造函数。

1 个答案:

答案 0 :(得分:0)

根据 DOC

  

任何函数在接受单个函数时都是有效的React组件   “props”(代表属性)对象参数与​​数据和   返回 React元素。我们称此类组件为“功能”   因为它们实际上是JavaScript函数。

但是在你的情况下,函数不返回React元素,它返回两个数字的总和。

解决问题的一种方法是:将(x+y)换成p标记,如下所示:

const func = function add(x,y) { return <p>{ x+y }</p>; }

从根本上看,JSX是语法糖:

React.createElement(component, props, ...children)

因此,当我们写JSX时,它会被React.createElement所遵循。

<强>更新

您可以使用child: PropTypes.element对React元素进行Proptypes验证。如果孩子得到反应元素以外的任何值,它将发出警告。

Container.propTypes = {
   child: PropTypes.element
}