Javascript 如何使用ReactJS修改css属性onClick

我想更改两个元素的不透明度和指针事件当我单击另一个元素时，我搜索了，并且我能够使用样式和设置状态的常量来更改不透明度（我还没有完全理解），但是指针事件很难拒绝。最后我用JQuery写了一篇文章，这样你就能更好地理解我想做什么

const App = () => {

  const iluminar = () => {
    $('#oscurecido').css("opacity", 0);
    $('#oscurecido').css("pointer-events", "none");
    $('#sesion').css("opacity", 0);
    $('#sesion').css("pointer-events", "none");
  }

  return (
    <div className="App">
      <div id="oscurecido" onClick={iluminar}></div>
      <Router>
        <Nav/>
        <Switch>
          <Route path="/" exact component={Productos}/>
          <Route path="/Carrito" exact component={Carrito}/>
          <Route path="/" component={Err}/>
        </Switch>
      </Router>
      {true ? <Sesion/> : null}
    </div>
  )
}

const-App=（）=>{
常量iluminar=（）=>{
$（'oscurecido'）.css（“不透明度”，0）；
$（'oscurecido'）.css（“指针事件”，“无”）；
$（'#sesion'）.css（“不透明度”，0）；
$（'#sesion'）.css（“指针事件”，“无”）；
}
返回(
{true？：null}
)
}

您应该做的是创建一个类，其中包含所有要应用于该类的css代码。然后，创建一个默认值为false的状态，然后单击将其设置为true。如果状态为true，则分配该类

.some-class { ...css properties }


const App = () => {
const [ iluminated, setIluminated ] = useState(false)

return (
<div className="App">
  <div id={iluminated ? 'some-class' : ''} onClick={() => setIluminated(true)}></div>
  <Router>
    <Nav/>
    <Switch>
      <Route path="/" exact component={Productos}/>
      <Route path="/Carrito" exact component={Carrito}/>
      <Route path="/" component={Err}/>
    </Switch>
  </Router>
  {true ? <Sesion/> : null}
</div>

。某些类{…css属性}
常量应用=（）=>{
const[iluminated，setIluminated]=useState（false）
返回(
设置发光（真）}>
{true？：null}

)

---

}

您真的不应该将jQuery和react结合起来。这真是一个糟糕的做法。请查看CLSX：如果这有帮助的话，如果您将答案标记为正确，我将不胜感激。