reactjs 如何点击按钮时css transition展示一个 dropdown

要在React中实现点击按钮时展示一个dropdown，可以按照以下步骤进行操作：

1. 在React组件中定义一个状态变量，用于控制dropdown的显示与隐藏。

   import React, { useState } from 'react';
   
   function Dropdown() {
     const [isOpen, setIsOpen] = useState(false);
   
     return (
       <div>
         <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
         {isOpen && <div className="dropdown-content">Dropdown Content</div>}
       </div>
     );
   }
   
   export default Dropdown;
   

2. 在CSS中定义.dropdown-content的样式，并设置transition属性以实现过渡效果。

   .dropdown-content {
     display: block;
     transition: opacity 0.5s ease;
   }
   

   这里使用了opacity属性进行过渡效果的展示与隐藏，可以根据需求修改为其他样式属性。

3. 在父组件中使用Dropdown组件。

   import React from 'react';
   import Dropdown from './Dropdown';
   
   function App() {
     return (
       <div className="App">
         <Dropdown />
       </div>
     );
   }
   
   export default App;
   

通过以上步骤，当点击按钮时，dropdown会展示或隐藏，并且带有过渡效果