专栏首页地方网络工作室的专栏React + webpack 开发单页面应用简明中文文档教程(八)Link 跳转以及编写内容页面

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

版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 https://blog.csdn.net/FungLeo/article/details/80841274

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 原创,允许转载,但转载必须保留首发链接。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript基础修炼(12)——手把手教你造一个简易的require.js

    许多前端工程师沉浸在使用脚手架工具的快感中,认为require.js这种前端模块化的库已经过气了,的确如果只从使用场景来看,在以webpack为首的自动化打包趋...

    大史不说话
  • 深入理解Spring系列之十五:@Async实现原理

    对于异步方法调用,从Spring3开始提供了@Async注解,该注解可以被标注在方法上,以便异步地调用该方法。调用者将在调用时立即返回,方法的实际执行将提交给S...

    JavaQ
  • TensorFlow系列专题(十四): 手把手带你搭建卷积神经网络实现冰山图像分类

    这里我们要解决的任务是来自于Kaggle上的一道赛题(https://www.kaggle.com/c/statoil-iceberg-classifier-c...

    磐创AI
  • Jmeter(四十二)_控制器下遍历一组参数

    在接口自动化的过程中,经常遇到需要遍历的参数组。jmeter在中,foreach控制器可以实现遍历参数,但是只能有一个入参。一旦遇到数组,foreach控制器表...

    飞天小子
  • 用 TypeScript 开发 Node.js 程序[每日前端夜话0x5E]

    翻译:疯狂的技术宅 原文:https://medium.com/@freek_mencke/how-to-write-node-js-applications-...

    疯狂的技术宅
  • RxJS 学习系列 12. 合并操作符 concatAll, mergeAll, switchAll

    这节讲处理高阶 Observable 的操作符 所谓的 Higher Order Observable 就是指一个 Observable 发送出的元素还是一个...

    mafeifan
  • 2-3 webpack的正确安装方式

    webpack是基于node开发的环境打包工具。首先需要安装node环境。 进入node官网,尽量安装最新版本的稳定版node。因为提高webpack打包速度...

    love丁酥酥
  • 超详细的Python实现微博模拟登陆,小白都能懂

    最近由于需要一直在研究微博的爬虫,第一步便是模拟登陆,从开始摸索到走通模拟登陆这条路其实还是挺艰难的,需要一定的经验,为了让朋友们以后少走点弯路,这里我把我的分...

    一墨编程学习
  • 能够用于劫持Youtube用户通知消息的CSRF漏洞探究

    大家好,今天分享的writeup是关于YouTube通知服务(Notification)的CSRF漏洞,作者利用该漏洞可以劫持其他YouTube用户(受害者)的...

    FB客服
  • Vue+axios请求本地json

    1:在static文件夹底下新建json文件,( 本地JSON文件一定要需放在static文件夹之下。)

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券