如何在React中渲染svg.node（）对象？

Question

我正在制作D3 Circle Pack布局。

    const BubbleChart = ({ bubblesData, height, width }: BubbleChartProps) => {
    
      const packData = (size: any) => {
        return d3.pack().size(size).padding(3);
      }
    
      const makeHierarchy = () => {
        return d3.hierarchy({ children: bubblesData }).sum((d:any) => d.count);
      }
    
      const makeBubbles = () => {
        const hierachalData = makeHierarchy();
        const packLayout = packData([width - 2, height - 2]);
        const root = packLayout(hierachalData);
    
        const svg = d3.create("svg")
        .attr("width", width)
        .attr("height", height);
    
        const leaf = svg.selectAll("g")
          .data(root.leaves())
          .enter().append("g")
            .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
    
        leaf.append("circle")
        .attr("r", d => {
          const minValue = d3.min(bubblesData, (d) => d.count)
          const maxValue = d3.max(bubblesData, (d) => d.count)
          let scale = d3.scaleSqrt()
            .domain([0, maxValue as unknown as number])
            .range([0,d.r]);
          return scale(minValue as unknown as number);
          })
          .attr("fill", "#d9edf7")
  
        return svg.node();
      }
    
      return (
        <div id="chart">{makeBubbles()}</div>
      )
    }
    
 export default BubbleChart

问题是我无法渲染svg.node（），因为pf svg.node（）是对象。我要低于错误：

对象无效，因为React子女（发现：[对象SVGSVGELEMENT]）。如果您打算渲染一个孩子的集合，请改用数组。

有没有办法渲染的方法？

Answer 1

也遇到了这个问题。该解决方案是使用REF对HTML元素，并使用Ref.Current.AppendChild（SVGOBject）。

在没有危险的js reect JS中svgsvggelement，而无需

危险

svgRef.current.replaceWith(svgObj);
return (
  <div>
    <svg ref={svgRef} />
  </div>
)