15版react脚手架使用

//App

import React, { Component } from 'react';

import './App.css';
import {Link} from "react-router"



class App extends Component {
  render() {
    return (
      

         
000
          

          首页
          关于
          其他

         {this.props.children}
      

    );
  }
}

export default App;

 

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Home from "./components/home"
import Other from "./components/other"
import About from "./components/about"
import Xq from "./components/xq"


import {Router,Route,hashHistory,IndexRoute,IndexRedirect,Redirect,Link} from "react-router"








ReactDOM.render(
    
       
           
                
           
           
           
           

           
       
       
    
    
    
    
    
    
    , document.getElementById('root'));
registerServiceWorker();

//关于

import React, { Component } from 'react';


class About extends Component {
    render() {
      return (
        

           
关于我们
        
  
      );
    }
  }
  
  export default About;
  

//其他
import React, { Component } from 'react';


class Other extends Component {
    render() {
      return (
        

           
其他
        
  
      );
    }
  }
  
  export default Other;

//详情

import React, { Component } from 'react';
import $ from "jquery"

 
class Xq extends Component {
    constructor(props){
       super(props)
       this.state={str:""}
    }


    render() {
      return (
        

           
           
           
商品详情
           
{this.state.str}
        
  
      );
    }


    // componentDidMount(){
    //   var that = this
    //   $.ajax({
    //     type:"get",
    //     url:"http://datainfo.duapp.com/shopdata/getGoods.php",
    //     data:{goodsID:that.props.params.id},
    //     async:"true",
    //     dataType:"jsonp",
    //     success:function(data){
    //       console.log(data)
    //       that.setState({str:data[0].detail})
    //     }
    //   })
    // }


    componentWillReceiveProps(a){
      var that = this
      $.ajax({
        type:"get",
        url:"http://datainfo.duapp.com/shopdata/getGoods.php",
        data:{goodsID:that.props.params.id},
        async:"true",
        dataType:"jsonp",
        success:function(data){
         
          that.setState({str:data[0].detail})
        }
      })
    }

  
    
  }
  
  export default Xq;