<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react/umd/react.development.js
  2. https://unpkg.com/react-dom/umd/react-dom.development.js