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 文件，並錄入一下內容：

// 我們需要在頁面頂部，引用我們需要的各種工具
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>
    )
  }
}

動態參數，我們可以用 :id 這種方式寫在路由當中。

編寫完成之後，我們在首頁上點擊鏈接，就可以看到我們剛剛做的詳情頁面了。

其他補充

1. dangerouslySetInnerHTML={{__html: dat.content}} 是渲染 html 代碼的方式。使用時一定要注意安全。
2. this.props.match.params.id 是獲取 url 中的參數的方法。

其他沒什麼要說的了。都是 js 的基本功了。

通過這八篇博文的學習，我們已經掌握了 react 的基本開發了。下面的博文，我們會脫離接口調用這個部分，來講一些更加進階的內容。

本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。