如何向具有 React 函数组件的元素添加 CSS class

Question

我想知道如何向没有任何 CSS classes.I 的元素添加 CSS class 我正在寻找带有 Hooks 的 React Functional 组件解决方案.这里我想添加 class 到标签，我不需要提前添加 ${myclass} 。这意味着在我们执行 addclass 功能之前，标签应该没有任何属性。我尝试了以下方法，需要获得最佳实践。提前致谢！

function Trial(){
  const [myclass, changeclass] = useState("");
  const addclass=()=>{
  changeclass(`active`)
  }  
  return(
    <div>
      <h1 className={` ${myclass}`}>Hi</h1>
      <button onClick={addclass}>Click it</button>
    </div>
  )
}

Answer 1

你可以添加一个id，然后通过queryselector

操作DOM中的元素

在要更改其类名的元素中

 <h1 className={`${myclass}`} id = "change-class">Hi</h1>

然后在函数中

  const addclass=()=>{
      document.querySelector("#change-class").classList.add('new-class-name');
  }

所以整个代码看起来像这样

function Trial(){
 const addclass=()=>{
      document.querySelector("#change-class").classList.add('new-class-name');
  }  

return(
    <div>
     <h1 className={`${myclass}`} id = "change-class" >Hi</h1>
      <button onClick={addclass}>Click it</button>
    </div>
  )
}

有关更多信息，请查看 here and here

Answer 2

您可以为此使用 useRef() 挂钩：

function Trial(){
  const ref = useRef(null);
  const addclass=()=>{
     const h1 = ref.current; // corresponding DOM node
     h1.className = "active";
  }  
  return(
    <div>
      <h1 ref={ref} className="">Hi</h1>
      <button onClick={addclass}>Click it</button>
    </div>
  )
}

如何向具有 React 函数组件的元素添加 CSS class

How to add a CSS class to an element with React function components

components

function

reactjs

react-hooks