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的图片
所以这边得做一个清除第一个图片的动作