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

【问题标题】：How to convert a div to a canvas using ReactJS?如何使用 ReactJS 将 div 转换为画布？
【发布时间】：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;" 
   width="1238" height="600">
</canvas>

我错过了什么吗？

【问题讨论】：

标签： javascript html5-canvas twitter-bootstrap-3 reactjs

【解决方案1】：

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

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

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

【讨论】：