reactjs - 将 innerHTML 设置为清除 React ref 的方法有哪些风险？

Question

我正在使用一个外部库，我无法控制在表格中显示一些按钮。输出看起来有点像这样：

[BUTTON_A] [PRODUCT_NAME_A] [PRODUCT_PRICE_A] 
[BUTTON_B] [PRODUCT_NAME_B] [PRODUCT_PRICE_B] 
[BUTTON_C] [PRODUCT_NAME_C] [PRODUCT_PRICE_C] 

这个库有一个方法renderButtons(flags, container)，接受一组标志（不相关），以及对渲染按钮的容器的引用

我现在正在实现列的行排序功能，因此必须使用新排序的产品数组重新渲染表。

目标是获得：

[BUTTON_C] [PRODUCT_NAME_C] [PRODUCT_PRICE_C] 
[BUTTON_B] [PRODUCT_NAME_B] [PRODUCT_PRICE_B] 
[BUTTON_A] [PRODUCT_NAME_A] [PRODUCT_PRICE_A] 

这是该功能的初始代码：

const Button = () => {
  const containerRef = useRef<HTMLDivElement>();

  React.useEffect(() => {

      buttonsLibrary.renderButtons(myFlags, containerRef.current);
    }, [myFlags ,containerRef])
}

但是当然，当组件重新渲染时，这只会将一个新按钮附加到容器中，所以我得到了多个按钮。

现在，我无法控制该renderButtons(flags, container)方法的实现，所以我想到的唯一选择如下：

const Button = () => {

  const containerRef = useRef<HTMLDivElement>();

  React.useEffect(() => {
      
      if (containerRef.current.innerHTML.length > 0) {
        containerRef.current.innerHTML = "";
      }

      buttonsLibrary.renderButtons(myFlags, containerRef.current);
    }, [myFlags ,containerRef])
}

现在我正在尝试考虑这是否是一个好主意，是否有替代方案，以及这可能导致什么类型的问题。

你们有什么感想？有没有更好的方法来实现我正在寻找的结果？

标签： reactjs