如果我想确保反应组件的构造函数作为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
进行验证)。我正在寻找传递这种组件的构造函数。
答案 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
}