<div id="root"></div>
function App() {
const [ref, setRef] = React.useState();
const [show, setShow] = React.useState(true);
React.useEffect(() => {
console.log(ref)
}, [ref])
return <div>
<p>{show ? (
<button
onClick={() => {
setShow(false);
}}
ref={setRef}
>
ref
</button>
) : (
<button
onClick={() => {
setShow(true);
}}
>
已删除ref
</button>)}</p>
<p>{ref?.textContent}</p>
</div>
}
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)
View Compiled
This Pen doesn't use any external CSS resources.