reactjs 如何点击按钮时动画展示一个 dropdown

在React中，可以使用state来控制按钮点击后的动画展示。

首先，需要在组件的state中添加一个属性来控制动画的展示与隐藏，例如 isDropdownVisible。

然后，在按钮的点击事件处理函数中，可以使用setState方法来更新 isDropdownVisible 的状态，从而触发动画的展示或隐藏。

最后，在渲染函数中，根据 isDropdownVisible 的状态来决定是否渲染dropdown组件。

下面是一个简单的示例代码：

import React, { useState } from 'react';

function App() {
  const [isDropdownVisible, setIsDropdownVisible] = useState(false);

  const handleButtonClick = () => {
    setIsDropdownVisible(!isDropdownVisible);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>点击按钮</button>
      {isDropdownVisible && <Dropdown />}
    </div>
  );
}

function Dropdown() {
  return <div>这是一个dropdown组件</div>;
}

export default App;

在上面的示例中，点击按钮时会切换 isDropdownVisible 的状态，从而触发dropdown组件的展示或隐藏