在React.js中使用自定义Web组件的最佳方法

问题描述

我正在使用reactjs制作一个Web应用程序，该应用程序的仪表可以显示压力传感器的读数。对于仪表板Web组件，我正在使用canvas-gauges。

canvas-gauges有一个 reactjs wrapper，但它仍在使用$div = $( 'div.drop-down-list' ); // Get all of the drop-down-lists cosnt $filtered = $div.filter((ix,el)=> el !== clickedDropDownList ) $filtered.hide(); // assumed that clickedDropDownList is a native element not a jQuery object. // later on if you want to do something with all the items use the `$div` // if you want the prevIoUsly filtered items use `$filtered`，componentwillReceiveProps，并且我想使用钩子，所以我尝试编写自己的自定义组件。

我正在将useRef与canvas组件一起使用以渲染我的gauge组件。为了更新量规值，我只是在该组件上传递了一个道具。

componentDidMount

此代码在使用google chrome或safari的计算机上正常工作，但是当我在手机中使用google chrome时，在对仪表值进行几次更新后，它崩溃了，并出现以下错误：

import React,{ useRef,useEffect } from "react";
import { RadialGauge } from "canvas-gauges";

const PressureGauge = (props) => {
  const value = props.value;

  const canvasRef = useRef(null);

  const draw = (canvas,value) => {
    new RadialGauge({
      renderTo: canvas,value: value,width: 300,height: 300,title: "Pressure",units: "bar",minValue: 100,maxValue: 400,}).draw();
  };

  useEffect(() => {
    const canvas = canvasRef.current;

    const render = () => draw(canvas,value);

    render();

  },[value]);

  return <canvas ref={canvasRef}  />;
};

export default PressureGauge;

我对此还不是很了解，但是我认为该组件多次放弃，导致手机无法处理。

我的问题：

在reactjs中使用和更新自定义Web组件的更好方法是什么。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript reactjs reactjs web-component