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

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

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

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

相关文章
|
3月前
|
XML JavaScript 前端开发
使用 doscify 将文章写成文档一般丝滑
使用 doscify 将文章写成文档一般丝滑
56 0
|
10月前
|
机器学习/深度学习 搜索推荐 算法
编程艺术 - 第二章 、俩个字符串是否包含问题以及扩展
编程艺术 - 第二章 、俩个字符串是否包含问题以及扩展
47 0
|
11月前
|
Python
一日一技:XPath『不包含』应该怎么写?
一日一技:XPath『不包含』应该怎么写?
228 0
|
前端开发 API
Three——一、详解基础场景搭建(结尾含完整代码)
详解基础场景搭建(结尾含完整代码)
152 0
|
XML 编解码 API
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
82 0
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
|
Java Maven
编写一个 spootboot 程序,有二个方法,一个问早上好,一个说再见
编写一个 spootboot 程序,有二个方法,一个问早上好,一个说再见
111 0
|
JavaScript 网络架构
ES6知识点补充——剩余参数、展开语法
JS查漏补缺系列是我在学习JS高级语法时做的笔记,通过实践费曼学习法进一步加深自己对其的理解,也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解剩余参数、展开语法
155 0
|
前端开发
评论列表案例-演示艾特符号替代相对路径的好处
评论列表案例-演示艾特符号替代相对路径的好处
|
缓存 API
如何写出高质量的代码 data 组件 函数 注释 命名 变量的次数
如何写出高质量的代码 data 组件 函数 注释 命名 变量的次数
|
Python
python-模块入门二(模块循环导入,区分python文件的两种用途,模块搜索路径,软件开发的目录规范)
一、模块的循环导入问题 run.py # import m1 # 第一次导入 m1.py # 错误示范 ''' print('正在导入m1') from m2 import y #第一次导入m2 x='m1' ''' m2.
1097 0