react+ts点击列表查看详情

index.tsx

import React, { Component } from 'react';
type Props = {
    history:any
    data:any
}
class Index extends React.Component<Props>{
    constructor(props:any){
        super(props)
    }
    public state={
        data:[
            {
               img:require("../../zyb_imgs/11924904_1554880732.png").default,
               txt:"中国气象局",
               buy_time:"2018年4月",
               sb_xinxi:"CEWS-2017",
               yongtu:"PM2.5检测",
               pinjia:"优于传统监测设备，使用方便"
            },
            {
                img:require("../../zyb_imgs/11999471_1555058863.jpg").default,
                txt:"北京大学",
                buy_time:"2018年12月",
                sb_xinxi:"CEWS-2017",
                yongtu:"用于观测研究",
                pinjia:"优于传统监测设备"
            },
            {
                img:require("../../zyb_imgs/17504986_1575620060.jpg").default,
                txt:"中山大学",
                buy_time:"2019年11月",
                sb_xinxi:"CEWS-2017",
                yongtu:"试验研究",
                pinjia:"优于传统监测设备，使用方便，精度高"
            },
            {
                img:require("../../zyb_imgs/17506826_1575622686.jpg").default,
                txt:"哈尔滨工业大学",
                buy_time:"2019年11月",
                sb_xinxi:"CEWS-2017",
                yongtu:"试验研究",
                pinjia:"设计更加符合人体工程学，容量足够大，洁净度高"
            },
            {
                img:require("../../zyb_imgs/17507641_1575623943.jpg").default,
                txt:"山东大学",
                buy_time:"2018年4月",
                sb_xinxi:"CEWS-2017",
                yongtu:"PM2.5检测",
                pinjia:"优于传统监测设备，使用方便"
             },
             {
                 img:require("../../zyb_imgs/17507834_1575624313.jpg").default,
                 txt:"中国气象局",
                 buy_time:"2018年12月",
                 sb_xinxi:"CEWS-2017",
                 yongtu:"用于观测研究",
                 pinjia:"优于传统监测设备"
             },
             {
                 img:require("../../zyb_imgs/17508231_1575624993.jpg").default,
                 txt:"北京环境检测机构",
                 buy_time:"2019年11月",
                 sb_xinxi:"CEWS-2017",
                 yongtu:"试验研究",
                 pinjia:"优于传统监测设备，使用方便，精度高"
             },
             {
                 img:require("../../zyb_imgs/18042317_1577888848.jpg").default,
                 txt:"新疆环境监测机构",
                 buy_time:"2019年11月",
                 sb_xinxi:"CEWS-2017",
                 yongtu:"试验研究",
                 pinjia:"设计更加符合人体工程学，容量足够大，洁净度高"
            },
        ]
    }
   xiabiao(item:any,index:number){
    console.log(item)
    this.props.history.push({pathname: `/case/detail/${index}`, state: {data:item}})
   }
    public render() {
        return (
            <div>

                <ul className="content">
                {
					this.state.data.map( (item, index )=>{
						return <li key={index} onClick={()=>{this.xiabiao(item,index)}}>
                            <div>
                                <img src={item.img} alt="" />
                                <p>{item.txt}</p>
                            </div>
                        </li>
					})
				}
                </ul>
          
            </div>
        );
    }
}

export default Index;

case.scss

.content{
    width: 1200px;
    height: 804px;
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    li{
        width: 300px;
        height: 363px;
        div{
            border: 1px solid #ccc;
            padding-top: 40px;
            width: 283.5px;
            height: 343px;
            img{
                display: block;
                margin: 0 auto;
            }
            p{
                text-align:  center;
                font-weight: 400;
                font-size: 16px;
                line-height: 80px;
            }
            p:hover{
                color: rgb(74, 135, 250);
            }
        }
    }
}
.product_brand{
    width: 1200px;
    height: 101px;
    padding: 16px 0 50px 0;
    margin: 0 auto;
    a{
        float: left;
        line-height: 35px;
        color: #1977cd;
        text-decoration: none;
    }
    span{
        float: left;
        line-height: 35px;
        color: #1977cd;
        margin: 0 5px;
    }
    a:hover{
        color: #000000;
    }
}
.fenyeqi{
    width: 440px;
    height: 34px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    p{
        width: 60px;
        height: 32px;
        line-height: 30px;
        text-align:  center;
        border: 1px solid rgb(212, 211, 211)
    }
}

detail.tsx

import React, {Component} from 'react';
import Header from '../../component/header'
import Footer from '../../component/footer'
import Fan from "../fan/index"
import axios from "axios"
type Props = {
    props:string,
    location:any,
    state:object,
    history:any
}
class Case extends React.Component<Props> {
    constructor(props:any){
        super(props)
        this.state={
            list:{},
            allList:[],
            id:''
        }
    }
    componentDidMount(){
        this.setState({
            list: this.props.location.state.data,
            allList:this.props.location.state.list,
            id:this.props.location.state.data.id
        })
        
    }
    prev(){
        let {list,allList,id}:any=this.state
        let ind:any
        allList.filter((item:any,index:any)=>{
            console.log(id)
            // console.log(id)
                if(item.id == id){
                    if(index == 0){
                        ind == 0
                    }else{
                        ind = index-1
                    }
                }
        })
        if(ind>=0){
            list = allList[ind]
            id = allList[ind].id
        }
        if(id!==0){
            this.props.history.push({pathname:`/case/detail/${id}`,state:{data:list,list:allList}})
        }
        this.setState({
            list,
            id
        })
        
    }
    next(){
        let {list,allList,id}:any=this.state
        let ind1:any
        allList.filter((item:any,index:any)=>{
            console.log(id)
            // console.log(id)
                if(item.id == id){
                    if(index == 8){
                        ind1 == 8
                    }else{
                        ind1 = index+1
                    }
                }
        })
        if(ind1<=8){
            list = allList[ind1]
            id = allList[ind1].id
        }
        if(id!==8){
            this.props.history.push({pathname:`/case/detail/${id}`,state:{data:list,list:allList}})
            
        }else{
            return false
        }
        this.setState({
            list,
            id
        })
            
    }
  render() {
      const {id,list}:any=this.state
    return (
      <div>
          <Header></Header>
          <div className='detail_content'>
          <div className='product_brand'>
                  <a href="/">首页</a>
                  <span>&gt;&gt;</span>
                  <a href="/case">用户案例</a>
                  <span>&gt;&gt;</span>
                  <a href="/case">案例详情</a>
              </div>
              <p className='title'>{list.txt}</p>
              <ul>
                  <li><span>购买时间：{list.buy_time}</span></li>
                  <li><span>客户名称：{list.txt}</span></li>
                  <li><span>提供设备信息：{list.sb_xinxi}</span></li>
                  <li><span>用途：{list.yongtu}</span></li>
                  <li><span>使用评价：{list.pinjia}</span></li>
                  <li><img src={list.img} alt="详情图片" /><img src={list.img} alt="详情图片" /><img src={list.img} alt="详情图片" /><img src={list.img} alt="详情图片" /></li>
                  
              </ul>
              <div className='next' >
                  <p onClick={()=>{this.prev()}}>上一篇</p>
                  <p onClick={()=>{this.next()}}>下一篇</p>
              </div>
          </div>
            <Fan></Fan>
          <Footer></Footer>
      </div>
    ) 
  }
}

export default Case;

detail.scss

.detail_content{
    width: 1200px;
    margin: 40px auto;
    margin-top: -80px;
    .title{
        text-align: center;
        font-weight: 800;
        font-size: 20px;
        line-height: 70px;
        border-bottom: 1px solid rgb(228, 227, 227);
    }
    ul{
        width: 600px;
        li{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            span{
                font-size: 16px;
                line-height: 32px;
            }
            img{
                height: 210px;
                width: 280px;
                height: 210px;
                margin-top: 20px;
            }
        }
    }
    .next{
        color: rgb(88, 150, 243);
        margin-top: 120px;
        width: 100%;
        padding-left: 14px;
        padding-right: 14px;
        height: 44px;
        background: rgb(238, 237, 237);
        display: flex;
        justify-content: space-between;
        line-height: 44px;
    }
}