开发者学堂课程【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'
所以用@符号虽然写起来麻烦但是移动文件时路径会随之发生改变,很方便。