使用React挂钩从HTML元素中删除/添加类名

import React, { useState, useEffect } from 'react';

function App() {
  const [classNames, setClassNames] = useState('');

  useEffect(() => {
    // 在状态变量classNames发生变化时更新元素的类名
    const element = document.getElementById('myElement');
    element.className = classNames;
  }, [classNames]);

  const removeClassName = () => {
    // 从状态变量classNames中删除类名
    setClassNames('');
  };

  const addClassName = () => {
    // 向状态变量classNames中添加类名
    setClassNames('my-class');
  };

  return (
    <div>
      <button onClick={removeClassName}>Remove Class</button>
      <button onClick={addClassName}>Add Class</button>
      <div id="myElement">Hello, World!</div>
    </div>
  );
}

export default App;