如何使用 React 函数组件向元素添加 CSS 类答案

【问题标题】：How to add a CSS class to an element with React function components如何使用 React 函数组件向元素添加 CSS 类
【发布时间】：2021-09-22 06:27:29
【问题描述】：

我想知道如何将 CSS 类添加到没有任何 CSS 类的元素。我正在寻找带有 Hooks 的 React 功能组件解决方案。在这里，我想将类添加到标签中，并且不需要提前添加 ${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>
  )
}

【问题讨论】：

看起来不错！我会重命名 addClass 函数，因为它没有添加类它更多的是 replaceClass 或 editClass 因为它覆盖了类
@GiladTamam，实际上我已经添加了一个类，因为 react 需要一个默认状态。实际上我不需要在其中预先添加一个类。我需要一个像
这样的空白元素，并且仅在函数调用后才需要添加该类。我希望这是有道理的。

标签： reactjs function react-hooks components

【解决方案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 和here

【讨论】：

它有效，你的想法很好。但是让我知道在没有 React Hooks 的情况下执行功能是否是最佳实践。告诉我。
Hooks 和普通函数一样，Hooks 和 Function 没有区别，querySelector 也是一个函数，所以不管你是否使用 Hooks。
其实不用加ID。它也将在以下方法中起作用。 function Trial(){ const addclass=()=>{ document.querySelector("h1").classList.add('new-class-name'); } return( <div> <h1>Hi</h1> <button onClick={addclass}>Click it</button> </div> ) }
@RenJitsm 是的，但是如果我们添加另一个h1 然后我们决定将类添加到新的呢？我们仍然可以这样做，但它会使代码变得混乱，并且对于不想制作大型项目的初学者来说效果很好，当我们可以添加 id 时不需要这样做，所以我相信最佳实践是 ids
另外，如果我的回答有帮助，请将其标记为已接受并投票，以便将来的访问者使用它

【解决方案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 的做事方式。

这样的空白元素，并且仅在函数调用后才需要添加该类。我希望这是有道理的。