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

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

开发者学堂课程【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'

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

相关文章
|
前端开发
第一个网页总结暨前端基础知识补充
一,css基本引入 二,字体引入样式 三,类名约定 四,文字相关 五,相关技巧 分竖线 六,案例遇到问题及解决方法 七,文本格式化标签 八,meta标签 九,表格 十,input表单 十 一,dl标签 十二,css相关补充 背景, 透明图像,opacity![](https://img-blog.csdnimg.cn/e6756a58e45c4b94aac154aeb76148c6.png) 在搜索框内添加图标 css3 边框-阴影,圆角 文本溢出显示,换行 css3 2D转换 transition过渡 Bootstrap4 颜色引用 Bootstrap4 进度条
95 0
第一个网页总结暨前端基础知识补充
|
机器学习/深度学习 搜索推荐 算法
编程艺术 - 第二章 、俩个字符串是否包含问题以及扩展
编程艺术 - 第二章 、俩个字符串是否包含问题以及扩展
74 0
|
Python
一日一技:XPath『不包含』应该怎么写?
一日一技:XPath『不包含』应该怎么写?
346 0
|
XML 编解码 API
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
138 0
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
|
前端开发 API
Three——一、详解基础场景搭建(结尾含完整代码)
详解基础场景搭建(结尾含完整代码)
199 0
|
Java Spring
Springboot 同一次调用日志怎么用ID串起来,方便最终查找
Springboot 同一次调用日志怎么用ID串起来,方便最终查找
472 0
Springboot 同一次调用日志怎么用ID串起来,方便最终查找
|
XML 存储 Java
编写Java程序,使用 dom4j 解析上一节王者荣耀“英雄”对应的Xml文件数据内容,打印输出,具体格式
编写Java程序,使用 dom4j 解析上一节王者荣耀“英雄”对应的Xml文件数据内容,打印输出,具体格式
240 0
编写Java程序,使用 dom4j 解析上一节王者荣耀“英雄”对应的Xml文件数据内容,打印输出,具体格式
|
存储 Linux Shell
你的一切我都想要!
在 Linux 中,我们可以使用 ls -la 用来查看当前目录里文件的详细信息,想必大家都用过。现在,我们想要保存 ls -la 命令的输出到文件 output.txt 中
183 0
你的一切我都想要!
|
前端开发
评论列表案例-演示艾特符号替代相对路径的好处
评论列表案例-演示艾特符号替代相对路径的好处
|
程序员
JavaWeb学习之路(4)--开发第一个网页,注意文件类型与文件拓展名
本文目录 1. 文件类型 2. 隐藏拓展名 3. 网页的拓展名 4. 网页的打开方式 5. 小结
141 0

相关实验场景

更多