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

最新推荐文章于 2024-08-21 08:48:16 发布

原创最新推荐文章于 2024-08-21 08:48:16 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #reactjs #react Link #react 渲染 html 内容 #react 入门教程

FungLeo的前端笔记同时被 3 个专栏收录

261 篇文章

订阅专栏

JavaScript

77 篇文章

订阅专栏

reactjs

15 篇文章

订阅专栏

本文介绍如何在React+webpack项目中使用Link进行页面跳转并创建内容详情页。通过设置路由和使用API请求数据，展示如何动态渲染列表及回复。

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

React 入门系列教程导航

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

创建 page/site/details.jsx 文件

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

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

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

import Header from '@/coms/header'

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

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

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

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

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

路由文件内容如下：

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

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

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