如何在 React 中获取参考自动生成的元素？

Question

我目前正在使用 react，但我现在遇到了一个我不知道如何修复的错误。我正在使用 mCustomScroll 栏，这个库会自动生成一个 id 为 MCSB_1 的元素。这意味着我不能将“参考”附加到它。我可以附加的唯一元素是 ref 是自动生成元素的父元素。

例如我的结构如下；

componentDidMount()  {
   $(this.refs.messagesPanel).mCustomScrollbar();  //The mCustomScrollbar is a plugin
}

render()  {
    return (
        <div id="messagesPanel" ref="messagesPanel"></div>
   );
}

问题是：当我调用 mCustomScrollbar();该插件自动在messagesPanel中生成一个我不知道如何访问的div：

<div id="messagesPanel">
    <div id="MCSB_1"></div>
</div>

基本上，我在问如果我不能附加参考，我如何访问“MCSB_1”。

谢谢！

Answer 1

一个选项可以是从你的 messagePanel 对象中使用 jQuery 的 find 函数

componentDidMount() {
 ...
}
someFunction() {
  let yourElement = $(this.refs.messagesPanel).find('#MCSB_1');
}