React-使用JSON增加品项

这边的功能是为了想呈现网页中作品集这个项目
但是在作品集中又分了很多品项
像是平面、网页、插画等等..
于是在最外层先放上一格一格的分类图
点进分类图之后
会跳出一个盖板框
盖板框内存放着该分类的图片与资讯
为了简化程式码
在这边使用了JSON来存取文字资讯
然后定义好内的内容之后
使用map()来呈现每一个分类

一开始先写好JSON内的资讯workData

[{    "id":1,    "title1":"Graphic Design",    "title2":"插画设计",    "link":"illastration_design-head",    "link2":"illastration_design",    "alt":"graphic_design"},{    "id":2,    "title1":"Graphic Design",    "title2":"BANNER设计",    "link":"graphic_design-head",    "link2":"graphic_design",    "alt":"graphic_design"},{    "id":3,    "title1":"UI Design",    "title2":"Jabra耳机APP UI设计(仿作)",    "link":"jabra_ui_design-head",    "link2":"jabra_ui_design",    "alt":"ui_design"}]

在这边先解释
id是为了能放在li里面的key
title为标题
link为图片的连结
alt是图片的alt

接下来放上整段程式码

const [openWork,setOpenWork]=useState(false);const [toLink,setLink]=useState('');const [tit1,setTit1]=useState('');const [tit2,setTit2]=useState('');const handleOpen=(link,title1,title2)=>{setOpenWork(true);setLink(link);setTit1(title1);setTit2(title2);        }const handleClose=()=>{setOpenWork(false);setLink('');        }const op={opacity:openWork?'1':'0',  transform:openWork?'scale(1)':'scale(0)',  overflow:openWork?'scroll':'hidden'  }<ul id="allPortfolioUl">  {workData.map(wk=>(  <li key={wk.id}>    <div className='box'  onClick={()=>{handleOpen(wk.link2,wk.title1,wk.title2)}}>      <a>        <div className="title">          <div className="titleCenter">            <h4>{wk.title1}</h4>            <p className="titleCenterP">{wk.title2}</p>          </div>        </div>          <img src={`img/work/${wk.link}.jpg`} alt={wk.alt}/>      </a>    </div>    <div className="portPage" style={op}>      <div className="closeP" onClick={handleClose}>x</div>      <div className="pageWrap">        <div className="portTitle">          <h4>{tit1}</h4>          <p className="titleCenterP">{tit2}</p>          <hr className="shortColorBar"/>        </div>        <img src={`img/work/${toLink}.jpg`} alt={wk.alt}/>      </div>      <div className="closePB" onClick={handleClose}>x</div>    </div>  </li>  ))}                       </ul>

首先引入workData这个JSON档
并使用map()把li排列出来
并定义li内的key
这边若没有定义key在console内会报错
接着这边我分为两个主要区块
一个是box与portpage
box为一开始排列在画面上的分类
点到了这个box会跳出potpage这个视窗
这里的

onClick={()=>{handleOpen(wk.link2,wk.title1,wk.title2)}}

为什么会传入这么多参数
是因为若不传入这些参数
在点击任何一个box进入后
所获得的资讯都会是最后一个id(全部一起)传入的内容
所以我们必须指定
点击到哪个连结会传入相对应的参数

接着使用useState来定义点击时的状态
与传入参数时的状态改变

const [openWork,setOpenWork]=useState(false);const [toLink,setLink]=useState('');const [tit1,setTit1]=useState('');const [tit2,setTit2]=useState('');const op={opacity:openWork?'1':'0',  transform:openWork?'scale(1)':'scale(0)',  overflow:openWork?'scroll':'hidden'}

一开始状态setOpenWork设定为false
也就是portpage的opacity为0
并且将传入参数title1、title2、link2
都设为空字串

点击box之后
透过handleOpen改变参数

const handleOpen=(link,title1,title2)=>{setOpenWork(true);setLink(link);setTit1(title1);setTit2(title2);        }const handleClose=()=>{setOpenWork(false);setLink('');        }

setOpenWork改变为true
另外三个状态都改变为对应参数
传入portpage
按下handleClose后
setOpenWork又变回false
并且将图片连结设为空字串
这边为什么图片连结要变回空字串呢?
因为这边发现到了一个问题
就是若没有再改回空字串
进入第一个box退出后
在点击第二个box
会先出现第一个box的图片
再显示出第二个box的图片
所以这边得做一个清除第一个图片的动作