以下是一个示例代码,实现了在点击按钮后,在按钮下方滑出一个列表,列表内容根据数组生成:

import React, { useState } from 'react';

function App() {
  const [showList, setShowList] = useState(false);
  const list = ['apple', 'banana', 'orange'];

  const toggleList = () => {
    setShowList(!showList);
  }

  return (
    <div>
      <button onClick={toggleList}>Show List</button>
      {showList && (
        <ul>
          {list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;

在上述代码中,我们使用了useState来管理一个showList变量,表示是否显示列表。在点击按钮时,调用toggleList函数来切换showList的值。当showList为true时,显示列表,使用map函数遍历list数组生成列表项


原文地址: https://www.cveoy.top/t/topic/gE66 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录