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

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

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

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

相关文章
|
4月前
|
前端开发 JavaScript Java
文本----简单编写文章的方法(中),后端接口的编写,自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑,想写好一个项目,先分析一下需求,再理一下实现思路,再搞几层,配好参数校验,lomb
文本----简单编写文章的方法(中),后端接口的编写,自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑,想写好一个项目,先分析一下需求,再理一下实现思路,再搞几层,配好参数校验,lomb
|
IDE 编译器 开发工具
善用 vs 中的错误列表和输出窗口,高效查找 C++ 多工程编译错误
善用 vs 中的错误列表和输出窗口,高效查找 C++ 多工程编译错误
|
机器学习/深度学习 搜索推荐 算法
编程艺术 - 第二章 、俩个字符串是否包含问题以及扩展
编程艺术 - 第二章 、俩个字符串是否包含问题以及扩展
69 0
|
Python
一日一技:XPath『不包含』应该怎么写?
一日一技:XPath『不包含』应该怎么写?
323 0
|
XML 编解码 API
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
124 0
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
|
前端开发 API
Three——一、详解基础场景搭建(结尾含完整代码)
详解基础场景搭建(结尾含完整代码)
192 0
|
前端开发
前端知识学习案例5vs code-搜索和替换全局内容
前端知识学习案例5vs code-搜索和替换全局内容
83 0
前端知识学习案例5vs code-搜索和替换全局内容
|
JavaScript 算法 前端开发
ES6知识点补充——模板字符串、默认参数
JS查漏补缺系列是我在学习JS高级语法时做的笔记,通过实践费曼学习法进一步加深自己对其的理解,也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解模板字符串、默认参数
203 0
|
JavaScript 网络架构
ES6知识点补充——剩余参数、展开语法
JS查漏补缺系列是我在学习JS高级语法时做的笔记,通过实践费曼学习法进一步加深自己对其的理解,也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解剩余参数、展开语法
191 0
|
前端开发
前端工作总结250-uni-扩展运算符实现拼接合并操作
前端工作总结250-uni-扩展运算符实现拼接合并操作
114 0