javascript - 如何在不使用 JSX 的情况下在 React 中使用 CanvasJS 元素？

Question

为什么不是 JSX？它根本行不通。我最近问了一个关于它的问题，并被建议删除该type="text/jsx"属性，因此我只能使用 JS 语法。

从这个意义上说，我理解完全可以不用 JSX，例如

<button onClick={() => this.setState({liked: true})}>
  Like
</button>

可以简单地改写为

React.createElement(
  "button",
  {onClick: () => this.setState({liked: true})},
  "Like"
)

到目前为止，一切都很好。但是我将如何重写这样的东西呢？

<div>
  <CanvasJS.Chart options = {options} 
    onRef={ref => this.chart = ref}
  />
  <span id="timeToRender" style={spanStyle}></span>
</div>

这里，CanvasJS.Chart不是原生的 HTML 标签，而是 CanvasJS 库中的一个类。我尝试创建一个实例

let canvasJSChart = new CanvasJS.Chart(
  ???,
  {options, onRef: ref => this.chart = ref}
);

但是我不知道用什么代替???，应该是图表容器的 DOM id，也就是上一个 JSX 示例中的外部div。我还不能访问那个元素，因为我需要在div的构造函数canvasJSChart中作为参数“children”传递。

我还尝试使用另一个div来临时包含canvasJSChart，然后才能将它传递给它的实际容器（与timeToRender span一起），如下所示：

let timeToRender = React.createElement(
  "span",
  {id: "timeToRender", style}
);

let canvasJsChart = new CanvasJS.Chart(
  "temp",
  {options, onRef: ref => this.chart = ref}
)

React.createElement(
  "div",
  {},
  // children:
  timeToRender,
  canvasJSChart
);

虽然timeToRender完全没有给我带来任何问题并且渲染完美，但只要我添加canvasJSChart到孩子，我就会得到一个Uncaught Error: Objects are not valid as a React child，这真的很奇怪，因为timeToRender它确实是一个对象，但它仍然可以完美地工作。

我错过了什么？如何让 CanvasJS 元素成为 React 元素的子元素？

标签： javascriptreactjscanvasjs