我們如何在另一個組件中單擊按鈕時更改反應組件中元素的 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)}>
   )  
 }