单击按钮以在 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>