reactjs - React.js Polymorphism: Checking Child Type Fails -

i've got situation have navgroup renderas prop possible values of div, collapsible , dropdown achieve sort of "polymorphism" in react.js. works until down collapsible or dropdown , want check children collapsiblehead or dropdowntoggle find navgrouphead.

see jsbin.

since dropdown , collapsible components can't find child looking event handlers aren't being attached , can't no satisfaction.

i in need of enlightenment: on right track? there simple solution this? or thinking wrong , should different? there "react way" doing sort of thing? it? if not, should there be?

you're seeing same type of component you've marked todo because cloned child components rendering returning type of component - doesn't replace child component.

if use react developer tools, you'll see collapsible example:

<collapible>   <div>     <navgrouphead>       <collapsiblehead> 

i think doing you're trying to (components render rendering more specific components) nicely may depend on change react's currently-undocumented context feature:

• switch context use parent tree instead of owner tree
• see introduction contexts in react.js in lieu of docs now

contexts alternative manually passing props down tree. in case, 1 of examples collapsible, wants pass callback down link used toggle collapsing.

instead of having clone each , every component on way down link, collapsible provide callback using getchildcontext() , collapsible-specific child component later pick off this.context , generate link onclick prop (or clone navlink , change use jsx spread pass props link creates)

as stands context lost once rendering hits <navgrouphead>, owned component.

i encountered same issue when trying implement block-based template inheritance using context hold stacks of blocks:

• a failed attempt implement block inheritance using react contexts