react学习笔记-手风琴效果

最新推荐文章于 2025-11-16 03:18:44 发布

原创

最新推荐文章于 2025-11-16 03:18:44 发布 · 732 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端

本文是React学习笔记，详细介绍了如何实现手风琴效果，包括环境安装、代码编写及展示最终效果。通过安装nodejs和react脚手架工具，创建项目的目录结构，并给出关键代码。

React学习笔记-下拉列表（手风琴效果）

文章目录

React学习笔记-下拉列表（手风琴效果）

1.环境安装

安装nodejs，输入node -v检查是否安装成功。

再在项目目录中打开cmd，安装react脚手架工具npm i create-react-app,目录结构如下

├─public
	├─index.html
├─src
	├─App.js
	├─data.js
	├─dl.js
	├─index.css
	├─index.js

2.代码

//App.js
import React,{
   
   Component} from 'react';
import Dl from './dl';
import data from "./data";
class App extends Component{
   
   
    render(){
   
   
        return (<div className="friend-list">
          {
   
   /* 注意 data 是一个对象，而非数组 */}
          {
   
   
            Object.keys(data).map(itemName=>{
   
   
                {
   
   /* key的作用和取值在后文中详细的讲 */}
                return <Dl 
                    key={
   
   itemName} 
                    dlData={
   
   data[itemName]}
                />
            })