如何在子元素之后插入“React”组件？

Posted 2023-02-21

【中文标题】如何在子元素之后插入“React”组件？

【英文标题】：How to insert a `React` component after a child element?

【发布时间】：2014-04-12 23:52:39

【问题描述】：

我正在尝试创建一个React 组件并将其插入到子元素之后。这是标记。

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Other <b class="caret"></b>
  </a>
</li>

我想在<a> 标记之后插入我的React 组件，但不是<a> 标记的子项。这是我想要的样子。

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Other <b class="caret"></b>
  </a>
  <ul ... this is my React component>

  </ul>
</li>

这是添加组件的代码：

React.renderComponent(new NavbarDropdown(), this.$el.find('WHAT GOES HERE').get(0));

我不想添加带有 id 的 div 来放置它，那么如何在该位置添加 React 组件？

【问题讨论】：

顺便说一句，使用 React 的开发版本。你会看到一个警告，class 应该是 `className。

【参考方案1】：

React 需要将组件渲染到 something 上。所以你可以在那里放置一个占位符div。

【讨论】：

有没有办法让replace 代替append？

不，至少现在还没有。当您使用unmountComponentAtNode 时，这种方式会更容易。