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

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

在列表组件上方放入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'

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