我们如何在另一个组件中单击按钮时更改反应组件中元素的 state？

Question

我想在componentOne中的元素上添加活动 class 上的按钮单击componentTwo 。 我正在使用 useState 但我不知道如何将 state 传递给另一个组件。 componentTwo是componentOne的子级。

我想要活动的 class componentOne只要即使再次加载浏览器也不会再次单击该按钮

Answer 1

只需在父组件中创建一个 state 并将其作为道具传递

cosnt [active , setActive] =useState(false)

<ParentComponent>
    <componentOne active={active} , setActive={setActive} />
     <componentTwo active={active} , setActive={setActive} />
</ParentCompnent>

Component One :

  const ComponentOne = ({active}) => {
  return(
        <div className={`${active && 'activeClass'}`}></div>
   )  
 }


Component Two :

  const  ComponentTwo = ({setActive}) => {
  return(
        <button onClick={()=> setActive(true)}>
   )  
 }