React.js多态性:检查子类型失败

时间:2014-11-27 09:52:37

标签: reactjs

我遇到的情况是NavGroup renderAs道具Div,可能的值为CollapsibleDropdownCollapsible来实现React.js中的“多态”。它很有效,直到我进入DropdownCollapsibleHead,并希望检查孩子的DropdownToggleNavGroupHead,但只能找到Dropdown

请参阅jsbin

由于Collapsible和{{1}}组件找不到他们正在寻找的孩子,因此没有附加事件处理程序,我不能得到满足。

我需要启蒙:我走在正确的轨道上吗?有一个简单的解决方案吗?或者我认为这一切都错了,应该做一些完全不同的事情?做这种事情有“反应方式”吗?它是什么?如果没有,应该有吗?

1 个答案:

答案 0 :(得分:0)

您总是会看到标记TODO的相同类型的组件,因为克隆的子组件通过返回其他类型的组件来呈现自身 - 这不会替换子组件。

如果您使用React开发人员工具,那么您将看到可折叠示例:

<Collapible>
  <div>
    <NavGroupHead>
      <CollapsibleHead>

我认为你正在尝试做的事情(通过呈现更具体的组件来呈现自己的组件)很可能取决于对React当前未记录的上下文功能的这种改变:

上下文是在树中手动传递道具的替代方法。在这种情况下,您的一个示例是Collapsible,它想要将回调传递给将用于切换折叠的链接。

Collapsible可以使用getChildContext()提供回调,而不是必须克隆每个组件的链接,而且可以使用特定于Collapsible的子组件来提取{ {1}}并生成一个带有this.context道具(或克隆onClick的链接,并使用JSX传播将其所有道具传递给它创建的链接进行更改。

目前看来,一旦渲染点击NavLink,上下文将会丢失,因为它由另一个组件拥有。

在尝试使用上下文实现基于块的模板继承来保存堆栈时遇到了同样的问题: