摘要：完成详情页渲染，用到了来渲染先看效果在下新建数据正在加载中发布于作者次浏览来自分享个回复用到了中的一些组件，可以自己去官网参考下怎么用。里面定义了一些样式，主要解决渲染后里面的图片太宽，重新设置宽度。
完成详情页渲染，用到了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啥都想搞，学习更多内容。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/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的方式去自动下载关注的美剧。不过后来...
阅读 2128·2021-09-27 14:04
阅读 1873·2019-08-30 15:55
阅读 1698·2019-08-30 13:13
阅读 1065·2019-08-30 13:07
阅读 2741·2019-08-29 15:20
阅读 3239·2019-08-29 12:42
阅读 3323·2019-08-28 17:58
阅读 3593·2019-08-28 17:56
