props中的数据都是外界传递过来的,数据都是只读的;不能重新赋值; state/data中的数据,都是组件私有的;(通过Ajax获取回来的数据,一般都是私有数据),数据都是可读可写的
注意
使用class关键字创建的组件,有自己的 私有数据 和 生命周期函数;使用function创建的组件,只有props,没有自己的私有数据和生命周期函数。
二、React创建组件 实现评论列表
==================
实现评论列表的HTML骨架
根据以上学习内容,现在实现一个简单的小案例,将评论列表和评论内容抽离出来封装到俩个单独的jsx文件夹下。
//ComponmentList.jsx文件
import React from "react"
// 导入 评论项 子组件
import CmtItem from '@/components/CmtItem' //使用@更加方便的移动导入的文件路径
// 使用class关键字定义父组件
export default class ComponmentList extends React.Component{
constructor(){
super(),
this.state = {
ComponmentList:[//评论列表数据
{id:1,user:'张三',content:'我姓张'},
{id:2,user:'李四',content:'我姓李'},
{id:3,user:'王五',content:'我姓王'},
{id:4,user:'赵六',content:'我姓赵'},
{id:5,user:'田七',content:'我姓田'},
]
}
}
// 渲染当前组件所对应的虚拟DOM
render(){
return <div>
<h1>这是评论列表组件</h1>
{this.state.ComponmentList.map(item=> <CmtItem {...item} key={item.id}></CmtItem> )}
</div>
}
}
//CmtItem.jsx文件
import React from "react"
//使用 function 构造函数,定义普通的无状态组件
export default function CmtItem(props){
return <div>
<h1>评论人:{props.user}</h1>
<p>评论内容:{props.content}</p>
</div>
}
现在我们导入评论内容的子组件,将创建好的虚拟DOM渲染到页面上,大功告成!
//1.导入包
import React from 'react'
import ReactDOM from 'react-dom'
import ComponmentList from '@/components/ComponmentList'
ReactDOM.render(<div>
<ComponmentList></ComponmentList>
</div>,document.getElementById('app'))
实现评论列表的CSS样式
在正常项目中我们书写CSS样式的方式很简单,能不能在React中使用呢?试一试
我们正常书写内联样式的方式就是这样,看看浏览器结果 。。。。报错?
报错并不可怕,关键你有理解报错的原因和处理报错的能力。报错提醒我们在JSX中书写行内样式的不能上string,并且给我提供了书写的例子,看for example,两个大括号的含义分别是:外层的大括号表示的是要书写JSX,里面的那层表示要书写的是样式对象。
注意点:在行内样式中,如果是数值类型的样式,则可以不用引号包裹,如果是字符串类型的样式,必须使用引号包裹。
<h1 style={{color:'red',fontSize:'35px',zIndex:4}}>这是评论列表组件</h1>
解决样式格式书写之后,可以正式对评论列表进行编辑了,如下所示:
// 渲染当前组件所对应的虚拟DOM
render(){
return <div>
{/* 在JSX中书写行内样式的格式为 style={{color:'red'}} */}
{/* 在行内样式中,如果是数值类型的样式,则可以不用引号包裹,如果是字符串类型的样式值,必须使用引号包裹 */}
<h1 style={{color:'red',fontSize:'35px',zIndex:4,fontWeight:200,textAlign:'center'}}>这是评论列表组件</h1>
{this.state.ComponmentList.map(item=> <CmtItem {...item} key={item.id}></CmtItem> )}
</div>
}
//使用 function 构造函数,定义普通的无状态组件
export default function CmtItem(props){
return <div style={{border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'}}>
<h1 style={{fontSize:'14px'}}>评论人:{props.user}</h1>
<p style={{fontSize:'12px '}}>评论内容:{props.content}</p>
</div>
}
相信大家都理解,在内联样式中编写css,代码太长影响代码的整体的美观。在JSX中如何处理?
配置CSS样式表
//第一层封装:将样式对象和UI结构分离
const CmtItemdiv = {border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'}
const CmtItemh1 = {fontSize:'14px'}
const CmtItemp = {fontSize:'12px '}
//使用 function 构造函数,定义普通的无状态组件
export default function CmtItem(props){
return <div style={CmtItemdiv}>
<h1 style={CmtItemh1}>评论人:{props.user}</h1>
<p style={CmtItemp}>评论内容:{props.content}</p>
</div>
}
//第二层封装:合并成一个大的样式表对象
const style = {
item:{border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'},
user:{fontSize:'14px'},
content:{fontSize:'12px '}
}
//使用 function 构造函数,定义普通的无状态组件
export default function CmtItem(props){
return <div style={style.item}>
<h1 style={style.user}>评论人:{props.user}</h1>
<p style={style.content}>评论内容:{props.content}</p>
</div>
}
//第三层封装:抽离为单独的样式表模块
//举例:将style封装在src下components文件夹下创建的style.js文件里
export default {
item:{border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'},
user:{fontSize:'14px'},
content:{fontSize:'12px '}
}
//需要style的文件下导入以下命令即可
//import style from '@/components/style.js'
虽然将css抽离到 .js 文件,但还是有点毛病,正常我们书写css的时候,不是将css写入 .css文件中的吗?这样书写css样式才简单明洁,我们可以创建一个css文件夹,如果文件需要样式,我们可以将样式进行导入吗?可以的
在src新建css文件夹,写入格式导入需要样式的组件文件夹中,出现报错,为什么?
import cssobj from '@/css/ComponmentList.css'
提示:因为webpack默认处理不了后缀名为css的文件,想处理的话必须加loader,所以我们安装
新建终端或者拆分终端执行:安装完成后配置webpack.config.js的第三方模块
cnpm i style-loader css-loader -D
配置完成后,新建终端再次执行一次打包 npm run dev 没有报错说明引入css文件成功。
举个例子吧, 在css文件中书写代码如下
.title{
color: red;
}
直接调用css样式即可,如下图,成功
最后
全网独播-价值千万金融项目前端架构实战
从两道网易面试题-分析JavaScript底层机制
RESTful架构在Nodejs下的最佳实践
一线互联网企业如何初始化项目-做一个自己的vue-cli
思维无价,看我用Nodejs实现MVC
代码优雅的秘诀-用观察者模式深度解耦模块
前端高级实战,如何封装属于自己的JS库
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1lOT
真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】
dlMTZkMWYyNDZhNjUxZjA4ZThlZjdjZjRhZWRjZl9oZC5qcGc?x-oss-process=image/format,png)
VUE组件库级组件封装-高复用弹窗组件