每当chart_data值发生变化时,我想删除旧的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的所有子元素?
发布于 2020-12-23 21:42:37
您应该在removeChild()
方法中指定子元素。
chart.current.removeChild(chart.current.children[0])
发布于 2020-12-24 05:46:40
Node.removeChild()要求将子节点作为参数删除。如果想要删除所有子元素,可以使用Element.innerHTML
chart.current.innerHTML = "";
发布于 2020-12-23 21:40:39
https://stackoverflow.com/questions/65425206
复制相似问题