React + webpack 开发单页面应用简明中文文档教程(八)Link 跳转以及编写内容页面

前端之家收集整理的这篇文章主要介绍了React + webpack 开发单页面应用简明中文文档教程(八)Link 跳转以及编写内容页面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React + webpack 开发单页面应用简明中文文档教程(八)Link 跳转以及编写内容页面

React 入门系列教程导航

React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念
React + webpack 开发单页面应用简明中文文档教程(二)创建项目
React + webpack 开发单页面应用简明中文文档教程(三)目录说明以及调整项目构架文件
React + webpack 开发单页面应用简明中文文档教程(四)调整项目文件以及项目配置
React + webpack 开发单页面应用简明中文文档教程(五)配置 api 接口请求文件
React + webpack 开发单页面应用简明中文文档教程(六)渲染一个列表,初识 jsx 文件
React + webpack 开发单页面应用简明中文文档教程(七)jsx 组件中调用组件、父组件给子组件传值
React + webpack 开发单页面应用简明中文文档教程(八)Link 跳转以及编写内容页面
React + webpack 开发单页面应用简明中文文档教程(九)子组件给父组件传值
React + webpack 开发单页面应用简明中文文档教程(十)在 jsx 和 scss 中使用图片
React + webpack 开发单页面应用简明中文文档教程(十一)将项目打包到子目录运行


在前面博文中,我们已经渲染了列表,并且用 Link 标签,来进行了跳转。但是我们并没有编写内容页面。这一篇,我们来解决这些问题。

创建 page/site/details.jsx 文件

我们创建 page/site/details.jsx 文件,并录入一下内容

// 我们需要在页面顶部,引用我们需要的各种工具@H_403_29@
import React,{ Component } from 'react'@H_403_29@

import Api from '@/tool/api.js'@H_403_29@

import Header from '@/coms/header'@H_403_29@

// 每一个 jsx 文件都得默认导出一个组件,格式如下@H_403_29@
export default@H_403_29@ class@H_403_29@ Details extends Component {
  // 在这里,我们设置我们的初始数据,如,这里我们设置 dat 为一个空对象@H_403_29@
  // 其他不用管,照抄,自己需要啥就写啥就可以了。@H_403_29@
  constructor (props) {
    super(props)
    this@H_403_29@.state = {
      dat: {},loading: true@H_403_29@
    }
  }

  // 当组件加载时,执行一些内容,其他时机执行,请搜索 react 生命周期@H_403_29@
  componentDidMount () {
    this@H_403_29@.getData()
  }

  // 自定义一个方法,在其他地方用 this.方法名 来调用运行@H_403_29@
  getData () {
    // 通过 props.match 来拿到 url 中的 id@H_403_29@
    let@H_403_29@ id = this@H_403_29@.props.match.params.id
    Api.get(`topic/${id}`,null@H_403_29@,r => {
      this@H_403_29@.setState({dat: r.data,loading: false@H_403_29@})
    })
  }

  // 每一个 jsx 组件,都必须包含 render 函数,这里渲染出我们的 dom 结构@H_403_29@
  render () {
    let@H_403_29@ { dat,loading } = this@H_403_29@.state
    let@H_403_29@ dom = null@H_403_29@
    let@H_403_29@ reDom = null@H_403_29@
    // 我们用 loading 的值来判断是否请求到接口@H_403_29@
    // 实际这里可以做更多的处理,比如做一个加载中的组件。@H_403_29@
    if@H_403_29@ (!loading) {
      if@H_403_29@ (dat.replies.length !== 0@H_403_29@) {
        let@H_403_29@ listDom = dat.replies.map((i,k) => {
          return@H_403_29@ (
            <li@H_403_29@ key@H_403_29@={k}@H_403_29@>@H_403_29@ <h3@H_403_29@>@H_403_29@{i.author.loginname} 说:</h3@H_403_29@>@H_403_29@ <article@H_403_29@ dangerouslySetInnerHTML@H_403_29@={{__html:@H_403_29@ i.content@H_403_29@}}>@H_403_29@</article@H_403_29@>@H_403_29@ </li@H_403_29@>@H_403_29@ ) }) reDom = ( <div@H_403_29@ className@H_403_29@='replies_list'@H_403_29@>@H_403_29@ <ol@H_403_29@>@H_403_29@{listDom}</ol@H_403_29@>@H_403_29@ </div@H_403_29@>@H_403_29@ ) } dom = ( <div@H_403_29@ className@H_403_29@="outer home"@H_403_29@>@H_403_29@ <Header@H_403_29@ title@H_403_29@='内容详情'@H_403_29@ />@H_403_29@ <h2@H_403_29@>@H_403_29@{dat.title}</h2@H_403_29@>@H_403_29@ <p@H_403_29@>@H_403_29@ 作者:{dat.author.loginname} <br@H_403_29@ />@H_403_29@ 日期:{dat.create_at} </p@H_403_29@>@H_403_29@ <article@H_403_29@ dangerouslySetInnerHTML@H_403_29@={{__html:@H_403_29@ dat.content@H_403_29@}}>@H_403_29@</article@H_403_29@>@H_403_29@ <hr@H_403_29@ />@H_403_29@ {reDom} </div@H_403_29@>@H_403_29@ ) } // 最后,把结果 return 出去,即可。 return dom } }@H_403_29@

配置 @/router/App.js 路由文件

路由文件内容如下:

import React,{ Component } from 'react'@H_403_29@
import { BrowserRouter as Router,Switch,Route } from 'react-router-dom'@H_403_29@

import SiteIndex from '@/page/site/index'@H_403_29@
import SiteDetails from '@/page/site/details'@H_403_29@

export default@H_403_29@ class@H_403_29@ App extends Component {
  render () {
    return@H_403_29@ (
      <Router@H_403_29@ basename@H_403_29@="/"@H_403_29@>@H_403_29@ <Switch@H_403_29@>@H_403_29@ <Route@H_403_29@ exact@H_403_29@ path@H_403_29@='/'@H_403_29@ component@H_403_29@={SiteIndex}@H_403_29@ />@H_403_29@ <Route@H_403_29@ exact@H_403_29@ path@H_403_29@='/details/:id'@H_403_29@ component@H_403_29@={SiteDetails}@H_403_29@ />@H_403_29@ </Switch@H_403_29@>@H_403_29@ </Router@H_403_29@>@H_403_29@ ) } }@H_403_29@

动态参数,我们可以用 :id 这种方式写在路由当中。

编写完成之后,我们在首页上点击链接,就可以看到我们刚刚做的详情页面了。

其他补充

  1. dangerouslySetInnerHTML={{__html: dat.content}} 是渲染 html 代码的方式。使用时一定要注意安全。
  2. this.props.match.params.id获取 url 中的参数的方法

其他没什么要说的了。都是 js 的基本功了。

通过这八篇博文的学习,我们已经掌握了 react 的基本开发了。下面的博文,我们会脱离接口调用这个部分,来讲一些更加进阶的内容

本文由 FungLeo 原创,允许转载,但转载必须保留首发链接

猜你在找的React相关文章