时间戳

首页 > 解决方案 > 在同一个容器中“手动”添加多个 React 组件

javascript - 在同一个容器中“手动”添加多个 React 组件

问题描述

我正在迁移一个旧的“jQuery”应用程序，添加一些 React 组件。我有一些 JS/jQuery 代码在 DOM 中添加了一些元素。我想使用例如一个新Item组件来替换它，创建许多实例并将它们添加到同一个容器中。而且我需要获取真正的 DOM 元素来操作它（使用旧的 JS/jQuery 代码）。

我找到了这个解决方案：

const elt1 = ReactDOM.findDOMNode(ReactDOM.render(<CalendarItem item={item} />, container))

但是容器内容被替换为新的Item并添加了许多项目，只有最后一个最终在容器中。

我试过了portal：

const elt2 = ReactDOM.createPortal(<CalendarItem item={item} />, container)

但返回的元素elt2不是 DOM 元素（我可以在之后操作）。

有解决方案吗？

谢谢

标签： javascriptjqueryreactjs

解决方案

如果您想使用相关的 DOM 元素来操作 React 组件，请查看 Refs ( https://reactjs.org/docs/refs-and-the-dom.html )。

所以在构造函数中创建 ref：

constructor(props) {
  super(props);
  ...
  this.calendarItem = React.createRef();
}

然后将 ref 提供给您的新 CalendarItem：

<CalendarItem item={item} ref={this.calendarItem} />

然后，您可以使用 访问该 CalendarItem 的实际 DOM 节点，this.calendarItem.current例如：

$(this.calendarItem.current).focus();

推荐阅读