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

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

为什么不是 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",onRef: ref => this.chart = ref}
)

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

虽然 timetoRender 完全没有给我带来任何问题并且完美呈现，但是一旦我将 canvasJSChart 添加到孩子们，我就会得到一个 Uncaught Error: Objects are not valid as a React child，这真的很奇怪，因为 {{ 1}} 确实是一个对象，但它仍然可以完美运行。

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