資訊專欄INFORMATION COLUMN
摘要：完成詳情頁渲染，用到了來渲染先看效果在下新建數據正在加載中發布于作者次瀏覽來自分享個回復用到了中的一些組件，可以自己去官網參考下怎么用。里面定義了一些樣式，主要解決渲染后里面的圖片太寬，重新設置寬度。
完成詳情頁渲染，用到了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" ? (
用到了antd中的一些組件，可以自己去官網參考下怎么用。 my.css里面定義了一些樣式，主要解決markdown渲染后里面的圖片太寬，重新設置寬度。
a{
text-decoration:none;
color:#333;
}
img{
max-width: 1300px;
}
2 在models下創建對應的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參數設置為false來獲取markdown數據，true為html數據
4 創建詳情頁routes/DetailPage.jsimport 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;
使用了參數路由，在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");
前面兩節課忘說dva-loading了，需要在這里使用，才能在組件中獲取loading屬性
6 在ListData組件中加入路由跳轉詳情頁import {Link} from "dva/router";
{item.title}
使用了Link來做跳轉，順帶把我們的Header組件的跳轉也給改了
大功告成看看效果首頁 新手入門 API 關于 注冊 登陸
歡迎關注我的公眾號mike啥都想搞，學習更多內容。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100204.html
摘要：首先是一個基于和的數據流方案，然后為了簡化開發體驗，還額外內置了和，所以也可以理解為一個輕量級的應用框架。本教程是利用的開放來做一個一樣的網站，以此來學習框架的使用。寫的不好的地方還請多多包涵，大家一起學習。 dva 首先是一個基于 redux 和 redux-saga 的數據流方案，然后為了簡化開發體驗，dva 還額外內置了 react-router 和 fetch，所以也可以理解為...
摘要：異步最佳實踐避免回調地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術和異步函數。 Nodejs 連接各種數據庫集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫 Node.js Rest API 的 10 個最佳實踐 - 前端 - 掘金全文共 6953 字，讀完需 8 分鐘，速讀需 2 分鐘。翻譯自...
摘要：知乎日報代理首先感謝提供的分析使用詳情請參考他提供的參數和地址代理轉發的使用為前綴進入代理路由啟動界面圖像獲取后為圖像分辨率，接受任意的格式，為任意非負整數，返回值均相同返回值示例最新消息等具體參考提供的分析中的使用方式以及參數含義。 項目說明 這是一個基于express的node后端API服務，當時只是想抓取字幕組網站的下載資源，以備以后通過nas的方式去自動下載關注的美劇。不過后來...
閱讀 2141·2021-09-27 14:04
閱讀 1884·2019-08-30 15:55
閱讀 1707·2019-08-30 13:13
閱讀 1076·2019-08-30 13:07
閱讀 2755·2019-08-29 15:20
閱讀 3248·2019-08-29 12:42
閱讀 3346·2019-08-28 17:58
閱讀 3608·2019-08-28 17:56
