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

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

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

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

目录
打赏
0
0
0
27
127
分享
相关文章
sklearn中分类模型评估指标(一):准确率、Top准确率、平衡准确率
accuracy_score函数计算准确率分数,即预测正确的分数(默认)或计数(当normalize=False时)。 在多标签分类中,该函数返回子集准确率(subset accuracy)。 如果样本的整个预测标签集与真实标签集严格匹配,则子集准确率为 1.0; 否则为 0.0。
云原生之使用Docker部署etherpad文档编辑器
云原生之使用Docker部署etherpad文档编辑器
843 2
阿里云ecs.c6.large服务器ECS计算型c6性能评测
阿里云服务器ECS计算型c6实例ecs.c6.large为2核4G配置,CPU采用Intel Xeon(Cascade Lake) Platinum 8269CY
635 0
阿里云ecs.c6.large服务器ECS计算型c6性能评测
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)
每日学一点加强技术水平,夯实基础。 阅读这篇文章,一起学习rem布局吧。
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问