Javascript 在React中将外部库从基于类移动到功能组件

我正在使用带有React的jexceljavascript库。文档概述了使用组件的方法，但使用了

ReactDOM.findDOMNode（）

，我认为这已被弃用

我已经尝试将它移动到一个功能组件，但虽然它表面上确实有效，但存在一个问题，使用该类的React组件重新渲染了大约5次。。。每次重新渲染都会导致JExcel元素添加另一个工作表

以下是原始示例代码：

从“React”导入React；
从“react dom”导入react dom；
从“Jetcel pro”导入Jetcel；
导入“/styles.css”；
导入“./node_modules/jexcel pro/dist/jexcel.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.options=props.options；
}
componentDidMount=函数（）{
this.el=jexcel（ReactDOM.findDOMNode（this.children[0]，this.options）；
};
addRow=函数（）{
this.el.insertRow（）；
};
render（）{
返回(


this.addRow（）}
/>
);
}
}
常量选项={
数据：[
[123, 412],
[null，32，43]，
[null，null，41，null，54]，
[null，123，null，64，23]，
[null，null，41，23，123]
],
思维维度：[5,5]，
列数：2，
允许注释：正确，
是的，
标签：假，
allowCreateTabs:false，
桌面宽度：“100%”
};
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

以下是我的更新版本，作为

组件：

import React，{useffect，useRef，useState}来自“React”；
从“react dom”导入react dom；
从“Jetcel pro”导入Jetcel；
导入“/styles.css”；
导入“./node_modules/jexcel pro/dist/jexcel.css”；
功能应用程序（道具）{
变量选项={
数据：[
[123, 412],
[null，32，43]，
[null，null，41，null，54]，
[null，123，null，64，23]，
[null，null，41，23，123]
],
思维维度：[5,5]，
列数：2，
允许注释：正确，
是的，
标签：假，
allowCreateTabs:false，
桌面宽度：“100%”
};
返回；
}
功能MyGrid（道具）{
const{options}=props；
const sheetRef=useRef（null）；
const[mySheet，setMySheet]=useState（null）；
useffect（（）=>{
setMySheet（jexcel（sheetRef.current，选项））；
}，[选择]；
函数addRow（）{
mySheet.insertRow（）；
}
返回(


addRow（）}/>
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

问题是数据是通过父组件中的获取来的。我怀疑这就是原因，或者可能是我对

useRef

的使用不当。有更好的方法吗？

好的，在Paul的帮助下，这里有一些技巧可以让它发挥作用

import React，{useRef，useState，useffect}来自“React”
从“Jetcel pro”导入Jetcel
导出默认函数MyGrid（道具）{
常量{options}=props
常量sheetRef=useRef（空）
const[mySheet，setMySheet]=useState（null）
useffect（（）=>{
//这就是魔法。。。
如果（！sheetRef.current.innerHTML&&options.data.length>0）{
setMySheet（jexcel（sheetRef.current，选项））
}
//清理功能
返回函数removeSheet（）{
sheetRef.current.remove（）；
}
}，[选项]）
函数addRow（）{
mySheet.insertRow（）
}
返回(


addRow（）}/>
)
}

为了防止多次调用外部库（本例中为Jetcel），诀窍是检查（a）参数是否已传递到组件中，即在本例中

options.data.length>0

，以及（b）我们仅在第一次调用外部库时，即

！sheetRef.current.innerHTML

-如果

sheetRef

元素没有innerHTML，则它尚未启动，因此它必须是第一次启动。因此，对

setMySheet

的调用只发生一次，并且仅在传入所有属性时发生

---

这是一个实际的演示。

好的，在Paul的帮助下@以下是让它发挥作用的诀窍

import React，{useRef，useState，useffect}来自“React”
从“Jetcel pro”导入Jetcel
导出默认函数MyGrid（道具）{
常量{options}=props
常量sheetRef=useRef（空）
const[mySheet，setMySheet]=useState（null）
useffect（（）=>{
//这就是魔法。。。
如果（！sheetRef.current.innerHTML&&options.data.length>0）{
setMySheet（jexcel（sheetRef.current，选项））
}
//清理功能
返回函数removeSheet（）{
sheetRef.current.remove（）；
}
}，[选项]）
函数addRow（）{
mySheet.insertRow（）
}
返回(


addRow（）}/>
)
}

为了防止多次调用外部库（本例中为Jetcel），诀窍是检查（a）参数是否已传递到组件中，即在本例中

options.data.length>0

，以及（b）我们仅在第一次调用外部库时，即

！sheetRef.current.innerHTML

-如果

sheetRef

元素没有innerHTML，则它尚未启动，因此它必须是第一次启动。因此，对

setMySheet

的调用只发生一次，并且仅在传入所有属性时发生

这是一个在行动中展示它的例子