我有一个通用组件,该组件将其子组件映射为仅过滤某种类型的子组件,如下所示。
但是,使用该属性type只是一个猜测,我找不到记录。不仅如此,对其进行日志记录表明它是一个函数- 无法执行。最重要的是,使用Browserify时需要解决几个问题。
type
另一种选择是读取child.prototype.displayName。但这也感觉不对。
问题:基本上,我正在寻找一种比较两个ReactJS组件是否相等的可靠方法。
例
(更新:毕竟还算不错)
var Foo = React.createClass({ render: function() { return <div>Foo</div>; } }); var Bar = React.createClass({ render: function() { return <div>Bar</div>; } }); var Main = React.createClass({ render: function() { var filteredChildren = []; filteredChildren = React.Children.map(function(child) { if (child.type === Foo.type) { return child; } }); return ( <div> {filteredChildren} </div> ); } }); React.render(<Main><Foo /><Bar /></Main>, document.body);
我认为您的例子是正确的。
实际上,在React 0.12中child.type === Foo.type是唯一可行的比较。 这与React 0.12正在弃用包装函数有关。
child.type === Foo.type
当0.13输出时,child.type其本身将为Foo。
child.type
Foo
Nitpick:请不要使用this.props.children.map,当孩子少于两个时,这将不起作用。 使用React.Children.map代替。
this.props.children.map
React.Children.map