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 组件的展示或隐藏。