單擊按鈕以在 reactjs 中切換顯示一個組件並隱藏另一個組件

Question

我有兩個單獨的按鈕，例如網格和列表按鈕：

<button 
     onClick={() => setClassName('jsGridView')}
     title="Grid View"
 >
     <IoGrid className="active" size="25"/>
</button>  

<button 
     onClick={() => setClassName('jsListView')}
     title="List View"
   >
    <BiAlignLeft size="25"/>
</button>

const [cName, setClassName] = useState('jsGridView');  

因此，當我單擊“網格視圖”按鈕時，它將顯示此組件：

<GridCard className={cName}/>

當我單擊列表視圖按鈕時，它將顯示

<ListCard className={cName}/>

用這個提到的類名..

類已更改按鈕但顯示隱藏組件不起作用。

Answer 1

您可以根據cName的值顯示不同的組件。

<div className="row mt-4 book-div">
   <div className={cName}>   
   { cName === 'jsGridView' ? <BooksGridCard/> : <BooksListCard/> } 
   </div>
</div>