国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

dva開發(fā)一個(gè)cnode網(wǎng)站（3）

dingding199389 / 1107人閱讀

摘要：完成詳情頁渲染，用到了來渲染先看效果在下新建數(shù)據(jù)正在加載中發(fā)布于作者次瀏覽來自分享個(gè)回復(fù)用到了中的一些組件，可以自己去官網(wǎng)參考下怎么用。里面定義了一些樣式，主要解決渲染后里面的圖片太寬，重新設(shè)置寬度。

完成詳情頁渲染，用到了react-markdown來渲染
先看效果：

1 在components下新建Detail.js 
import React , { Component }from "react";
import { Card, Avatar, Spin, Icon,Comment, Tooltip, List} from "antd";
import PropTypes from "prop-types";
import { connect } from "dva";
import  ReactMarkdown from "react-markdown";
import "./my.css";


class Detail extends Component{

    render() {
       const { Meta } = Card;
      return (
        
    {typeof(this.props.data.author)=="object" ? (
      
      
        
     {this.props.data.title}
} extra={
發(fā)布于{this.props.data.create_at} *作者{this.props.data.author.loginname}* {this.props.data.visit_count}次瀏覽 *來自 分享
} > ( } datetime={item.create_at} /> )} /> ) : ""} ) } componentWillMount () { const { par } = this.props this.props.dispatch({ type: "detail/find", payload: { id:par} }) } } Detail.propTypes = { id: PropTypes.string.isRequired, }; function mapStateToProps(state) { const {id,data} = state.detail; return { id, data, loading:state.loading }; } // export default ListData; export default connect(mapStateToProps)(Detail);

用到了antd中的一些組件，可以自己去官網(wǎng)參考下怎么用。 my.css里面定義了一些樣式，主要解決markdown渲染后里面的圖片太寬，重新設(shè)置寬度。

a{
    text-decoration:none;
    color:#333;
}

img{
  max-width: 1300px;
}
2 在models下創(chuàng)建對應(yīng)的model detail.js 
import * as listService from "../services/list";
export default {
  namespace: "detail",
  state:{
      id:"",
      data:{}
  },
    effects: {
        *find({ payload: { id } }, { call, put }) {
            const result = yield call(listService.find, { id })
                yield put({
                type: "updateData",
                payload: {
                    result,
                    id
                }
            })
        }
    },
  reducers: {
    "updateData"(state, { payload: data }) {
            let r = data.result.data
            const {id} = data
        return {...state,id,data:r}
    }
  },
    subscriptions : {
        setup({ dispatch, history }) {

    }
},
};
3 在service中添加獲取詳情的api list.js 
import request from "../utils/request";

export function query({ page,pageSize,type }) {
  return request(`/api/v1/topics?page=${page}&limit=${pageSize}&tab=${type}`);
}

export function find({ id }) {
  return request(`/v1/topic/${id}?mdrender=false`);
}

mdrender參數(shù)設(shè)置為false來獲取markdown數(shù)據(jù)，true為html數(shù)據(jù)

4 創(chuàng)建詳情頁routes/DetailPage.js 
import React from "react";
import { connect } from "dva";
import Header from "../components/Header";
import Detail from "../components/Detail";

function DetailPage(props) {
 const {params} = props.match
  return (
    

      

      

          
      

    

  );
}

DetailPage.propTypes = {
};

export default connect()(DetailPage);

使用了自己定義的Header 和Detail組件。在router.js中邦定路由到頁面：

import React from "react";
import { Router, Route, Switch } from "dva/router";
import IndexPage from "./routes/IndexPage";
import DetailPage from "./routes/DetailPage";

function RouterConfig({ history }) {
  return (
    
      
        
        
      
    
  );
}

export default RouterConfig;

使用了參數(shù)路由，在DetailPage.js中,從props.match.params中就可以取到id值傳給Detail組件

5 別忘了在index.js中注冊model以及插件 
import dva from "dva";
import "./index.css";
import createLoading from "dva-loading";

// 1. Initialize
const app = dva();

// 2. Plugins
 app.use(createLoading());

// 3. Model
app.model(require("./models/listdata").default);
app.model(require("./models/detail").default);

// 4. Router
app.router(require("./router").default);

// 5. Start
app.start("#root");

前面兩節(jié)課忘說dva-loading了，需要在這里使用，才能在組件中獲取loading屬性

6 在ListData組件中加入路由跳轉(zhuǎn)詳情頁 
import {Link} from "dva/router";
{item.title}

使用了Link來做跳轉(zhuǎn)，順帶把我們的Header組件的跳轉(zhuǎn)也給改了

 
       首頁
       
       
         新手入門
       
       
         API
       
       
        關(guān)于
       
       
         注冊
       
       
        登陸
大功告成看看效果

歡迎關(guān)注我的公眾號mike啥都想搞，學(xué)習(xí)更多內(nèi)容。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/100204.html

相關(guān)文章

  • dva開發(fā)一個(gè)cnode網(wǎng)站（1）

    摘要：首先是一個(gè)基于和的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗(yàn)，還額外內(nèi)置了和，所以也可以理解為一個(gè)輕量級的應(yīng)用框架。本教程是利用的開放來做一個(gè)一樣的網(wǎng)站，以此來學(xué)習(xí)框架的使用。寫的不好的地方還請多多包涵，大家一起學(xué)習(xí)。 dva 首先是一個(gè)基于 redux 和 redux-saga 的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗(yàn)，dva 還額外內(nèi)置了 react-router 和 fetch，所以也可以理解為...

    marek 評論0 收藏0

  • node技術(shù)棧 - 收藏集 - 掘金

    摘要：異步最佳實(shí)踐避免回調(diào)地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術(shù)和異步函數(shù)。 Nodejs 連接各種數(shù)據(jù)庫集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫 Node.js Rest API 的 10 個(gè)最佳實(shí)踐 - 前端 - 掘金全文共 6953 字，讀完需 8 分鐘，速讀需 2 分鐘。翻譯自...

    王偉廷 評論0 收藏0

  • nodejs練手爬蟲+API測試

    摘要：知乎日報(bào)代理首先感謝提供的分析使用詳情請參考他提供的參數(shù)和地址代理轉(zhuǎn)發(fā)的使用為前綴進(jìn)入代理路由啟動界面圖像獲取后為圖像分辨率，接受任意的格式，為任意非負(fù)整數(shù)，返回值均相同返回值示例最新消息等具體參考提供的分析中的使用方式以及參數(shù)含義。 項(xiàng)目說明 這是一個(gè)基于express的node后端API服務(wù)，當(dāng)時(shí)只是想抓取字幕組網(wǎng)站的下載資源，以備以后通過nas的方式去自動下載關(guān)注的美劇。不過后來...

    bigdevil_s 評論0 收藏0

發(fā)表評論

0條評論

dingding199389

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<