如何使用useRef钩子在react中删除div的子元素？

Question

我想在图表数据值发生变化时删除旧的 SVG 并创建一个新的 SVG。

import React, {useRef, useEffect, useState} from 'react'
import * as d3 from 'd3'
import { useSelector} from "react-redux";

const Barchart = () =>{
    const chart = useRef(null);
    const chart_data= useSelector(state => state.ChartReducer);

    useEffect(() => {
        let svg = d3.select(chart.current)
        //code to create the chart
        //
        return () => {
            //How to remove the old svg element from the ref chart.current?
            //I tried
            chart.current.removeChild() // This throws an error saying expects 1 argument got 0

        }
    },[chart_data])

    return(
       <div className="bar-chart" ref={chart}></div>
    )

}

export default Barchart

chart.current.removeChild()并没有删除 的孩子<div className="bar-chart" ref={chart}></div>

如何删除具有useRef引用的div的所有子元素？

Answer 1

您应该在方法中指示子元素removeChild()。

chart.current.removeChild(chart.current.children[0])

Answer 2

Node.removeChild()要求将子节点作为参数删除。如果要删除所有子元素，可以使用Element.innerHTML：

chart.current.innerHTML = "";