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

Question

我正在迁移一个旧的“ 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元素（以后我可以对其进行操作）。

有解决方案吗？

谢谢

Answer 1

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

因此在构造函数中创建ref：

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

然后将引用赋予您的新CalendarItem：

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

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

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