评论列表案例-演示艾特符号替代相对路径的好处|学习笔记

简介: 快速学习评论列表案例-演示艾特符号替代相对路径的好处

开发者学堂课程【React 入门与实战React 中绑定文本框与 State 中的值】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8108


评论列表案例-演示艾特符号替代相对路径的好处


在列表组件上方放入 Item 组件:

先把

function CmtItem( props) {

return <div>

<h1>评论人: {props.user}</h1>

<p>评论内容:{props.content}</p>

</div>

}

抽离到 CmtItem 中,然后暴露出去:

import React from react

export default  

回到上一界面写入:

//导入评论项组件

import CmtItem from "@/ components/CmtItem '

//这里解析得到的路径是绝对路径。

之后将 class 抽离出去:

import React from 'react'

export default class CmtList extends React.Component {

constructor() {

super()

this.state = {

Commentlist: [

//评论列表数据

{ id: 1,user:"张三',content: "哈哈,沙发’}

{ id: 2, user: ‘李四',content:‘哈哈,板凳’}

{ id: 3,user: '王五' , content: ‘哈哈,凉席’}

{ id: 4, user:'赵六',content:‘哈哈,砖头’}

{ id: 5,user:'田七', content:‘哈哈,楼下山炮’}]

}}

因为用到了评论 Item 项所以将

导入评论项组件

import CmtItem from '@/ components/CmtItem '

直接导入。这里没有修改路径。

然后:

//导入评论列表组件

import CmtList from '@/ components/CmtList'

所以用@符号虽然写起来麻烦但是移动文件时路径会随之发生改变,很方便。

相关文章
|
机器学习/深度学习 编译器 C++
C++模板元模板实战书籍讲解第一章(顺序、分支与循环代码的编写)--前篇
C++模板元模板实战书籍讲解第一章(顺序、分支与循环代码的编写)--前篇
73 0
|
4月前
|
存储 算法 Linux
LeetCode第71题简化路径
文章讲述了LeetCode第71题"简化路径"的解题方法,利用栈的数据结构特性来处理路径中的"."和"..",实现路径的简化。
LeetCode第71题简化路径
|
5月前
|
前端开发 JavaScript Java
文本----简单编写文章的方法(中),后端接口的编写,自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑,想写好一个项目,先分析一下需求,再理一下实现思路,再搞几层,配好参数校验,lomb
文本----简单编写文章的方法(中),后端接口的编写,自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑,想写好一个项目,先分析一下需求,再理一下实现思路,再搞几层,配好参数校验,lomb
|
7月前
|
Unix
leetcode-71:简化路径
leetcode-71:简化路径
41 0
|
7月前
|
前端开发 数据处理
【前端学习】—多种方式实现数组拍平(十一)
【前端学习】—多种方式实现数组拍平(十一)
|
前端开发
第一个网页总结暨前端基础知识补充
一,css基本引入 二,字体引入样式 三,类名约定 四,文字相关 五,相关技巧 分竖线 六,案例遇到问题及解决方法 七,文本格式化标签 八,meta标签 九,表格 十,input表单 十 一,dl标签 十二,css相关补充 背景, 透明图像,opacity![](https://img-blog.csdnimg.cn/e6756a58e45c4b94aac154aeb76148c6.png) 在搜索框内添加图标 css3 边框-阴影,圆角 文本溢出显示,换行 css3 2D转换 transition过渡 Bootstrap4 颜色引用 Bootstrap4 进度条
94 0
第一个网页总结暨前端基础知识补充
|
XML 编解码 API
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
132 0
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
|
前端开发 API
Three——一、详解基础场景搭建(结尾含完整代码)
详解基础场景搭建(结尾含完整代码)
199 0
|
C语言
C语言小项目 -- 通讯录(静态版+动态版+文件版)(1)
C语言小项目 -- 通讯录(静态版+动态版+文件版)(1)
133 0

热门文章

最新文章