我有一种情况，我有一个 NavGroup 和一个 renderAs 属性，可能值为 Div、Collapsible 和 Dropdown，以在 React.js 中实现一种“多态性”。在我进入Collapsible 或Dropdown 并想检查孩子是否有CollapsibleHead 或DropdownToggle 但只找到NavGroupHead 之前，它运行良好。
见jsbin。
由于Dropdown 和Collapsible 组件找不到他们正在寻找的孩子，事件处理程序没有被附加，我不能不满意。
我需要启蒙：我是否走在正确的轨道上？有一个简单的解决方案吗？还是我认为这一切都错了，应该做一些完全不同的事情？做这种事情有“反应方式”吗？它是什么？如果没有，应该有吗？
【问题讨论】：
标签： reactjs
您在标记 TODO 的位置总是看到相同类型的组件，因为您克隆的子组件通过返回另一种类型的组件来呈现自己 - 这不会替换子组件。
如果您使用 React 开发人员工具，您将在 Collapsible 示例中看到以下内容：
<Collapible>
<div>
<NavGroupHead>
<CollapsibleHead>
我认为做你想做的事情（通过渲染更具体的组件来渲染自己的组件）可能取决于对 React 当前未记录的上下文功能的更改：
上下文是手动向下传递道具树的替代方法。在这种情况下，您的示例之一是 Collapsible，它希望将回调向下传递到将用于切换折叠的链接。
Collapsible 可以使用getChildContext() 提供回调，而不是必须克隆每个组件，然后使用 this.context 将其从 this.context 中提取出来并生成带有 onClick 属性的链接（或克隆 NavLink 并使用 JSX 传播将其所有道具传递给它创建的链接）
就目前而言，一旦渲染命中<NavGroupHead>，上下文将丢失，因为它归另一个组件所有。
我在尝试使用上下文来保存块堆栈来实现基于块的模板继承时遇到了同样的问题：
【讨论】：