如何使用 ReactJS 将 div 转换为画布？

Posted 2023-02-21

【中文标题】如何使用 ReactJS 将 div 转换为画布？

【英文标题】：How to convert a div to a canvas using ReactJS?

【发布时间】：2014-04-14 04:13:45

【问题描述】：

xCharts JS 使用一些 CSS 类，一旦解释了 javascript，这些类就会转换为 html 5 画布。

我想知道 ReactJS 是否知道如何处理这种类型的组件？

当我在 render 方法中编写包含用于画布转换的类的 <div> 时，React 返回一个 <div> 而不是包含图表的画布。

代码如下：

render: function()
  if (!this.state.data) 
    return <div>Loading...</div>;
  
  return(
    <div className="col-lg-3 col-sm-6 col-xs-6 col-xxs-12">
      <div className="smallstat box">
        <div className="boxchart-overlay red">
       <!-- the div underneath should convert to a canvas --> 
      <div classname="boxchart">5,6,7,2,0,4,2,4,8,2,3,3,2</div>

        </div>  
        <span className="title">Transactions</span>
        <span className="value">this.state.data.globalPNL</span>
      </div>
    </div>
  );

这是 <div> 的预期结果

<canvas class="flot-overlay" 
   style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 619px; height: 300px;" 
    >
</canvas>

我错过了什么吗？

【参考方案1】：

根据xChart docs需要调用初始化图表：

var myChart = new xChart('bar', data, '#myChart');

如果您已经这样做了，您是否验证了元素在图表初始化时存在于 DOM 中？您可以尝试在componentDidUpdate中初始化图表