首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用useRef钩子在react中删除div的子元素?

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

Stack Overflow用户
提问于 2020-12-23 21:38:40
回答 3查看 3.3K关注 0票数 1

每当chart_data值发生变化时,我想删除旧的SVG并创建一个新的SVG。

代码语言:javascript
运行
复制
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的所有子元素?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-12-23 21:42:37

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

代码语言:javascript
运行
复制
chart.current.removeChild(chart.current.children[0])
票数 3
EN

Stack Overflow用户

发布于 2020-12-24 05:46:40

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

代码语言:javascript
运行
复制
chart.current.innerHTML = "";
票数 2
EN

Stack Overflow用户

发布于 2020-12-23 21:40:39

Node.removeChild()需要一个您缺少的节点参数(要删除的子节点)。

对于这个问题,没有任何具体的反应。

你是不是说

代码语言:javascript
运行
复制
chart.current.removeChild(svg)
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65425206

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档