Day18 使用React建立手风琴菜单(accordion menu)

主程序Accordion.js

import React ,{useState} from 'react';
import {questions} from './api';
import "./accordion.css";
import MyAccordion from './MyAccordion';

const Accordion = (props) => {
    const [data, setData] = useState(questions);
    return (
        <div>
           <section className="main-div">
           <h1>2021 iThome 铁人赛</h1>
           {
               data.map((curElem) =>{
                   const {id } = curElem;
                  return <MyAccordion  key={id} {...curElem}  /> ;
               })
           }
           </section>
        </div>
    )
}

export default Accordion;

组件程序MyAccordion.js

import React ,{useState} from 'react'

const MyAccordion = ({question,answer}) => {

    const [show, setShow] = useState(false);
    
    return (
        <div>
           
           <div className="title">
              <p onClick ={() =>setShow(!show)} >{show? "➖" :"➕"}</p>
              <h3>{question}</h3>
           </div>
           
           { show && <p className="answers">{answer}</p>}           

        </div>
    )
}

export default MyAccordion

放资料的程序api.js

export const questions = [
  {
      id:1,
      question:'活动办法',
      answer:" 必须挑战在iT邦帮忙上发表技术文章，连续 30 天不中断。成功通过这个需要坚持与毅力的考验，即可以练成铁人 "
  },
  {
    id:2,
    question:'如何参赛',
    answer:"注册成为 iT 邦帮忙会员即可报名参加铁人赛 "
},
{
    id:3,
    question:'活动规范',
    answer:"参加「主题竞赛」者，发表内容须符合主题，若发表内容与IT内容无关或不符主题，主办单位有权取消参赛资格。 "
},
{
    id:4,
    question:'主题竞赛组别',
    answer:"Modern Web   Mobile Development   Arm Platforms - Sparking the World’s Potential"
},
{
    id:5,
    question:'评选说明',
    answer:"评审作业分为资格审查与作品审查。资格审查由主办单位依参赛资格与作品格式审定，作品审查由主办单位聘请主题竞赛组别的领域专家，组成评审委员会进行初审与复审（决审）作业。若评审委员会认为作品未达水准或有特别表现，得决议奖项从缺或增减得奖名额。 "
},
{
    id:6,
    question:'注意事项',
    answer:"参加者应保证其因参加本活动所填写或提出之资料均为真实且正确，且未冒用或盗用任何第三人之资料。一经主办单位发现或经第三人检举该等资料有不实或不正确之情事，主办单位得取消其参加或得奖资格。 "
},
]