30行代码-React使用hook手写手风琴

1. 先给侬们看下效果哈

2. 开始准备撸代码了

2.1 准备数据

const data = [
    { title: '春天', content: '竹外桃花三两枝，春江水暖鸭先知。', author: '苏轼', name: '《惠崇春江晚景 》' },
    { title: '夏天', content: '小荷才露尖尖角，早有蜻蜓立上头。', author: '杨万里', name: '《小池》' },
    { title: '秋天', content: '人生若只如初见，何事秋风悲画扇。', author: '纳兰性德', name: '《木兰词·拟古决绝词柬友》' },
    { title: '冬天', content: '朔风如解意，容易莫摧残。', author: '崔道融', name: '《梅花》' },
]


复制代码

2.2开始撸代码，快看一部当心就没了

import React, { Component, useState, useEffect } from 'react'
import './index.css'
const AccordionItem = (props) => {
    const [heightItem, setHeightItem] = useState(0)
    useEffect(() => {
        setHeightItem(props.visable ?
            document.getElementById(`item_${props.index}`).scrollHeight
            : 0)
    })
    const { item, index, setVisable } = props
    return (
        <div className='accordion-item' onClick={() => setVisable(index)} >
            <div className='title'>{item.title}</div>
            <div className='content-box' style={{ height: heightItem }}
                id={`item_${index}`}>
                <p>{item.content}</p>
                <p>--{item.author}{item.name}</p>
            </div>
        </div>
    );
}
const Accordion = () => {
    const [visable, setVisable] = useState([true, false, false, false])
    const setVisableChild = (key) => {
        setVisable(visable.map((one, index) => key == index ? true : false))
    }
    return <div className='accordion'>
        {data.map((item, index) => {
            return <AccordionItem item={item} key={index} index={index}
                visable={visable[index]} setVisable={setVisableChild}
            />
        })}
    </div>
}
export default Accordion;


复制代码

2.3 样式搞上

.accordion {
    width: 500px;
    margin: 0px auto;
    border: 1px solid #ccc;
}

.title {
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    background: #ccc;
    border-top: 1px solid #fff;
}

.content-box {
    background: rgb(250, 245, 245);
    padding: 0px 10px;
    overflow: hidden;
    height: 0px;
    transition: .5s;
}

.content-box p:last-child {
    text-align: right;
}


复制代码

2.4 收工👏👏👏👏👏👏👏👏👏👏👏👏