做出反应如何使SVG容器组件管理低级组件中的图纸

Question

我开始学习React以使用大量数据制作可视化应用程序。此外，这是第一次创建基于Web的应用程序。以前，我在html，css，javascript等方面也没有多少经验。

到目前为止，我可以通过以下方式绘制内容：

...
<svg width={600} height={600}>
   <AnyChart data={data} ... />
   <AxisX ... />
   <AxisY ... />
</svg>

在这里，我想创建一个名为ChartContainer的React组件，它将创建一个给定宽度和高度的svg。我想使用ChartContainer组件来管理将来可以在AnyChart，AxisX和AxisY组件之间共享的信息。然后，任何绘图将进入svg。因此，代码可能如下所示：

...
<ChartContainer width={600} height={600}>
   <AnyChart data={data} ... />
   <AxisX ... />
   <AxisY ... />
</ChartContainer>
...

并且，ChartContainer仅包含以下渲染功能：

render() {
   return (
      <svg width={600} height={600}></svg>
   );
}

当然，它没有向我显示正确的结果。事实上，它没有任何吸引力。任何人都可以帮我解决这个问题吗？或任何参考或教程？我搜索过，但到目前为止找不到任何简单的例子。

感谢。