react+ts点击列表查看详情

Posted 2022-01-02 老张在线敲代码

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;

detail.tsx

import React, Component from 'react';

type Props = 
    props:string,
    location:any,
    state:object

class Case extends React.Component<Props> 
    constructor(props:any)
        super(props)
        this.state=
            list:
        
    
    componentDidMount()
        this.setState(
            list: this.props.location.state.data
        )
        console.log(this.props.location)
    
  render() 
      const list:any=this.state
      console.log(this.props.location.state.data)
    return (
      <div>
      
      
          <img src=list.img alt="" />
          --list.txt
      
      </div>
    ) 
  


export default Case;