react 学习demo 路由网络渲染数据和 解析html

Posted loaderman

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react 学习demo 路由网络渲染数据和 解析html相关的知识，希望对你有一定的参考价值。

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.xxx.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 (
            <div className="home">
            

                    <div className="list">



                        {

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

                                return(

                                    <div className="item" key={key}>
                            
                                        <h3 className="item_cate">{value.title}</h3>
                                        
                                        <ul className="item_list">

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

                                                    return(
                                                        <li key={k}>    

                                                          <Link to={`/pcontent/${v._id}`}>
                                                                <div className="inner">
                                                                    <img src={`${this.state.domain}${v.img_url}`} />
                                                                    <p className="title">{v.title}</p>                        
                                                                    <p className="price">{v.price}元</p>
                                                                </div>

                                                            </Link>        
                                                        </li> 
                                                    )
                                                })
                                            }
                                           
                                        
                                        </ul>                            
                                    </div>
                                )
                            })
                        }

                       
                    </div>

            </div>
        );
    }
}

export default Home;
/*
react解析html

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

    <div className="p_content"  dangerouslySetInnerHTML={{__html: this.state.list.content}}> </div>
*/

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 (
            
            <div className="pcontent">

                    <div className="back">  <Link to=‘/‘>返回</Link></div>
                    
                    <div className="p_content">        
                        <div className="p_info">                
                            <img src={`${this.state.domain}${this.state.list.img_url}`} />    
                            <h2>{this.state.list.title}</h2>                
                            <p className="price">{this.state.list.price}/份</p>
                        </div>
                        <div className="p_detial">
                            <h3>
                                商品详情                    
                            </h3>
                            <div className="p_content"  dangerouslySetInnerHTML={{__html: this.state.list.content}}> 
                               
                            </div>
                        </div>
                    </div>
                    
                    
                    <footer className="pfooter">
                        
                        <div className="cart">                
                            <strong>数量:</strong>
                            <div className="cart_num">
                            <div className="input_left">-</div>
                            <div className="input_center">
                                <input type="text"  readOnly="readonly" value="1" name="num" id="num" />
                            </div>
                            <div className="input_right">+</div>                      
                            </div>                                
                        
                        </div>
                        
                        <button className="addcart">加入购物车</button>            
                    </footer>


            </div>
        );
    }
}

export default Pcontent;
/*

  react路由的配置：
    1、找到官方文档 https://reacttraining.com/react-router/web/example/basic

    2、安装  cnpm install react-router-dom --save


    3、找到项目的根组件引入react-router-dom

       import { BrowserRouter as Router, Route, Link } from "react-router-dom";

    4、复制官网文档根组件里面的内容进行修改  （加载的组件要提前引入）


         <Router>

                <Link to="/">首页</Link>

                <Link to="/news">新闻</Link>

                <Link to="/product">商品</Link>


               <Route exact path="/" component={Home} />
               <Route path="/news" component={News} />    
               <Route path="/product" component={Product} />   
         </Router>


         exact表示严格匹配


react动态路由传值

      1、动态路由配置

          <Route path="/content/:aid" component={Content} />   

      2、对应的动态路由加载的组件里面获取传值

            this.props.match.params


      跳转：<Link to={`/content/${value.aid}`}>{value.title}</Link>

react get传值  


      1、获取 this.props.location.search


      

         
*/

import React, { Component } from ‘react‘;

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import Home from ‘./components/Home‘;

import Pcontent from ‘./components/Pcontent‘;

import ‘./assets/css/index.css‘

class App extends Component {

  render() {
    return (

      <Router>
        <div>
             
          <Route exact path="/" component={Home} />
          <Route path="/pcontent/:id" component={Pcontent} />
         
        </div>
      </Router>
    );
  }
}

export default App;
@charset "UTF-8";
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  margin: 0;
  padding: 0; }

html {
  font-size: 62.5%;
  /* 根元素是10px;     16*62.5%=10  默认在pc端根元素会解析成12px    */ }

body {
  font: 12px/1.5 ‘Microsoft YaHei‘,‘宋体‘, Tahoma, Arial, sans-serif;
  color: #555;
  background-color: #F7F7F7; }

em, i {
  font-style: normal; }

ul, li {
  list-style-type: none; }

strong {
  font-weight: normal; }

.clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both; }

/*# sourceMappingURL=basic.css.map */


/*列表css*/

/*列表*/
.item .item_cate {
  text-align: center;
  padding: .5rem; }
.item .item_list {
  display: flex;
  flex-wrap: wrap;
  padding: 0px .5rem; }
  .item .item_list li {
    width: 33.3%;
    padding: .5rem;
    box-sizing: border-box; }


    .item .item_list li a{

      text-decoration: none;

      color:#555;
    }

    .item .item_list li .inner {
      background: #fff;
      width: 100%;
      border-radius: .5rem;
      overflow: hidden; }
      .item .item_list li .inner img {
        width: 100%; }
      .item .item_list li .inner p {
        padding: .2rem .5rem; }
      .item .item_list li .inner .title {
        font-weight: bold; }



.price{
  color:red;
}



/*详情*/
.back {
  height: 3.8rem;
  line-height: 3.8rem;
  width: 3.8rem;
  border-radius: 50%;
  background: #000;
  position: fixed;
  top: .5rem;
  left: .5rem;
  }
  .back a{

    color: #fff;

    text-decoration: none;
  }


  .back:before {
    content: "";
    display: block;
    width: .8rem;
    height: .8rem;
    border-left: .2rem solid #fff;
    border-bottom: .2rem solid #fff;
    float: left;
    position: relative;
    top: 1.3rem;
    left: .6rem;
    transform: rotate(45deg);
    margin-right: .4rem; }

.p_content .p_info {
  background: #fff; }
  .p_content .p_info img {
    width: 100%;
    height: 18rem; }
  .p_content .p_info h2 {
    padding: .2rem .5rem; }
  .p_content .p_info .price {
    padding: .2rem .5rem;
    color: red; }
.p_content .p_detial {
  background: #fff;
  margin-top: 1rem; }
  .p_content .p_detial h3 {
    padding: .5rem; }
  .p_content .p_detial .p_content {
    padding: 1rem; }
    .p_content .p_detial .p_content img {
      max-width: 100%;
      display: block;
      margin: 0 auto; }
    .p_content .p_detial .p_content * {
      line-height: 1.5;
      color: #666; }

/*详情*/

.back {
  height: 3.8rem;
  line-height: 3.8rem;
  width: 3.8rem;
  border-radius: 50%;
  background: #000;
  position: fixed;
  top: .5rem;
  left: .5rem;
  color: #fff; }
  .back:before {
    content: "";
    display: block;
    width: .8rem;
    height: .8rem;
    border-left: .2rem solid #fff;
    border-bottom: .2rem solid #fff;
    float: left;
    position: relative;
    top: 1.3rem;
    left: .6rem;
    transform: rotate(45deg);
    margin-right: .4rem; }

.p_content .p_info {
  background: #fff; }
  .p_content .p_info img {
    width: 100%;
    height: 18rem; }
  .p_content .p_info h2 {
    padding: .2rem .5rem; }
  .p_content .p_info .price {
    padding: .2rem .5rem;
    color: red; }
.p_content .p_detial {
  background: #fff;
  margin-top: 1rem; }
  .p_content .p_detial h3 {
    padding: .5rem; }
  .p_content .p_detial .p_content {
    padding: 1rem; }
    .p_content .p_detial .p_content img {
      max-width: 100%;
      display: block;
      margin: 0 auto; }
    .p_content .p_detial .p_content * {
      line-height: 1.5;
      color: #666; }

.pfooter {
  position: fixed;
  bottom: 0px;
  height: 4.4rem;
  line-height: 4.4rem;
  background: #fff;
  left: 0px;
  width: 100%;
  border-top: 1px solid #eee; }
  .pfooter .cart {
    float: left;
    display: flex; }
    .pfooter .cart strong {
      flex: 1;
      font-size: 1.6rem;
      padding: 0rem .5rem; }
    .pfooter .cart .cart_num {
      width: 10rem;
      display: flex;
      margin-top: .8rem; }
      .pfooter .cart .cart_num .input_left, .pfooter .cart .cart_num .input_right {
        flex: 1;
        width: 2.8rem;
        height: 2.8rem;
        line-height: 2.8rem;
        text-align: center;
        color: red;
        border: 1px solid #eee;
        font-size: 2.4rem; }
      .pfooter .cart .cart_num .input_center {
        flex: 1; }
        .pfooter .cart .cart_num .input_center input {
          width: 2rem;
          text-align: center;
          width: 100%;
          height: 2.8rem;
          border: none;
          border-top: 1px solid #eee;
          border-bottom: 1px solid #eee;
          float: left; }
  .pfooter .addcart {
    float: right;
    background: red;
    color: #fff;
    height: 3rem;
    border: none;
    padding: 0 .5rem;
    border-radius: .5rem;
    margin-top: .8rem;
    margin-right: .5rem; }
/*
react解析html

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

    <div className="p_content"  dangerouslySetInnerHTML={{__html: this.state.list.content}}> </div>
*/

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(){

       
    // }

    componentDidMount(){

        //id

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

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

        this.requestData(id);

    }
    render() {
        return (
            
            <div className="pcontent">

                    <div className="back">  <Link to=‘/‘>返回</Link></div>
                    
                    <div className="p_content">        
                        <div className="p_info">                
                            {this.state.list.img_url?<img src={`${this.state.domain}${this.state.list.img_url}`} />:""} 

                            {/* <img src={`${this.state.domain}${this.state.list.img_url}`} /> */}
                            <h2>{this.state.list.title}</h2>                
                            <p className="price">{this.state.list.price}/份</p>
                        </div>
                        <div className="p_detial">
                            <h3>
                                商品详情                    
                            </h3>
                            <div className="p_content"  dangerouslySetInnerHTML={{__html: this.state.list.content}}> 
                               
                            </div>
                        </div>
                    </div>
                    
                    
                    <footer className="pfooter">
                        
                        <div className="cart">                
                            <strong>数量:</strong>
                            <div className="cart_num">
                            <div className="input_left">-</div>
                            <div className="input_center">
                                <input type="text"  readOnly="readonly" value="1" name="num" id="num" />
                            </div>
                            <div className="input_right">+</div>                      
                            </div>                                
                        
                        </div>
                        
                        <button className="addcart">加入购物车</button>            
                    </footer>


            </div>
        );
    }
}

export default Pcontent;

 

以上是关于react 学习demo 路由网络渲染数据和 解析html的主要内容，如果未能解决你的问题，请参考以下文章

当路由匹配时，React Router 不显示组件（但渲染工作）

react渲染原理分析

react服务端渲染proxy代理&&多级路由&&数据的脱水和注水

React中路由中的redux和redux拓展

React 学习记录

学习react基础知识