使用ref删除html节点

Question

如何避免使用state而使用ref来移除html元素？

export default function App() {
const divRef = useRef();
return (
<div className="App">
<div ref={divRef}>
<div
onClick={() => {
console.log(divRef.current);
}}
>
click to remove this node
</div>
</div>
</div>
);
}

removeChildren当前不存在？

Answer 1

divRef.current.removeChild，而非removeChildren

<div
onClick={() => {
console.log(divRef.current);
divRef.current.removeChild(divRef.current.children[0])
}}
>

Answer 2

是的，这个HTML元素可以在不使用UseState Hook的情况下删除。

import { useRef } from "react";
export default function App() {
// Init UseRef Hook
const divElement = useRef();
return (
<div className="App">
<div ref={divElement}>
<div
onClick={() => {
divElement.current.remove();
}}
>
click to remove this node
</div>
</div>
</div>
);
}

使用OnClick，我们将从useRef中删除divElement。

这是沙盒链接