React二维数组渲染 跳转详情传值

React路由配置 菜品列表二维数组渲染 跳转详情传值

import React, { Component } from 'react';

import {Link } from "react-router-dom";

const axios = require('axios');

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 

            list:[],
            domain:'http://a.itying.com/'
         };
    }
    requestData=()=>{

        var api=this.state.domain+'api/productlist';

        axios.get(api)
        .then((response)=>{         
             console.log(response);

            this.setState({

                list:response.data.result
            })
        })
        .catch(function (error) {         
          console.log(error);
        })
        
    }
    componentDidMount(){
        this.requestData();

    }
    render() {
        return (
            
"home">
            

                    
"list">



                        {

                            this.state.list.map((value,key)=>{

                                return(

                                    
"item" key={key}>
                            
                                        
"item_cate">{value.title}
                                        
                                        
"item_list">

                                            {
                                                value.list.map((v,k)=>{

                                                    return(
                                                        
    

                                                          
                                                                
"inner">
                                                                    this.state.domain}${v.img_url}`} />
                                                                    
"title">{v.title}
                        
                                                                    
"price">{v.price}元
                                                                

                                                                    
                                                        
 
                                                    )
                                                })
                                            }
                                           
                                        
                                        
                            
                                    

                                )
                            })
                        }

                       
                    

            

        );
    }
}

export default Home;

/*
react解析html

    https://reactjs.org/docs/dom-elements.html
    

    
 
*/

import React, { Component } from 'react';

import {Link } from "react-router-dom";

const axios = require('axios');

class Pcontent extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[],
            domain:'http://a.itying.com/'
         };
    }

    requestData(id){

        var api=this.state.domain+'api/productcontent?id='+id;

        axios.get(api)
        .then((response)=>{         
             console.log(response);

            this.setState({

                list:response.data.result[0]
            })
        })
        .catch(function (error) {         
          console.log(error);
        })

    }

    componentWillMount(){

        //id

        console.log(this.props.match.params.id)

        let id=this.props.match.params.id;

        this.requestData(id);

    }
    render() {
        return (
            
            
"pcontent">

                    
"back">  '/'>返回
                    
                    
"p_content">        
                        
"p_info">                
                            this.state.domain}${
     this.state.list.img_url}`} />    
                            
{
     this.state.list.title}
                
                            
"price">{
     this.state.list.price}/份
                        
                        
"p_detial">
                            

                                商品详情                    
                            
                            
"p_content"  dangerouslySetInnerHTML={
     {__html: this.state.list.content}}> 
                               
                            
                        
                    
                    
                    
                    
"pfooter">
                        
                        
"cart">                
                            数量:
                            
"cart_num">
                            
"input_left">-
                            
"input_center">
                                "text"  readOnly="readonly" value="1" name="num" id="num" />
                            
                            
"input_right">+
                      
                            
                                
                        
                        
                        
                        "addcart">加入购物车            
                    


            

        );
    }
}

export default Pcontent;

 

转载于:https://www.cnblogs.com/wyanblog/p/10996759.html