如何使用 useRef 鈎子刪除 div 的子元素？

Question

我想刪除舊的 SVG 並在 chart_data 值更改時創建一個新的 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 = "";

Answer 3

Node.removeChild()需要您缺少的節點參數（要刪除的子節點）。

這個問題沒有什么 React 特有的。

你是不是想說

chart.current.removeChild(svg)

？

Answer 4

我使用了上面的答案，即您應該在removeChild()方法中指示子元素。 但它會拋出一個錯誤，我是這樣處理的：

 if (chart.current.children[0]) { chart.current.removeChild(chart.current.children[0]); }

所以它會檢查孩子是否存在，然后將其刪除。