js reactjs 有一个按钮当点击按钮时在按钮下方滑出一个列表列表的内容是根据一个数组生成的。
以下是一个示例代码,实现了在点击按钮后,在按钮下方滑出一个列表,列表内容根据数组生成:
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 著作权归作者所有。请勿转载和采集!