在此我们之前学习了react的基本的语法,对于页面我们还经常关注的是页面的样式,那么react 项目中,我们应该如何使用样式
首先我们来做一个简单的页面一个评论的列表
模拟数据:
commentList:[
{id:0,user:'wdg0',content:'哈哈,我是wdg0的评论'},
{id:1,user:'wdg1',content:'哈哈,我是wdg1的评论'},
{id:2,user:'wdg2',content:'哈哈,我是wdg2的评论'},
{id:3,user:'wdg3',content:'哈哈,我是wdg3的评论'},
{id:4,user:'wdg4',content:'哈哈,我是wdg4的评论'}
]
首先我们先不考虑样式,我们第一步应该做的是将数据显示到页面上
import React from 'react'
import ReactDOM from 'react-dom'
class Cmt extends React.Component{
constructor(){
super();
this.state={
commentList:[
{id:0,user:'wdg0',content:'哈哈,我是wdg0的评论'},
{id:1,user:'wdg1',content:'哈哈,我是wdg1的评论'},
{id:2,user:'wdg2',content:'哈哈,我是wdg2的评论'},
{id:3,user:'wdg3',content:'哈哈,我是wdg3的评论'},
{id:4,user:'wdg4',content:'哈哈,我是wdg4的评论'}
]
}
}
render(){
return <div>
<h1>下面是评论列表</h1>
{
this.state.commentList.map((item,index)=>{
return <CmtOne key ={item.id} {...item}></CmtOne>
})
}
</div>
}
}
function CmtOne(props){
return <div>
<label>评论人: {props.user}</label>
<br/>
<label>评论内容: {props.content}</label>
</div>
}
const myh1=<div>
<Cmt></Cmt>
</div>
ReactDOM.render(myh1,document.getElementById("app"));
我们来做一个简单的分析
上面我们创建了一个Cmt的组件,并且是使用class 关键字来创建的,因为我们知道class 创建的组件是有状态的,也就是说可以有自己的私有数据,那么上面我们的数组就是最为私有的数据。
接下来我们在class 的构造器中constructor 中定义实例属性,state,在render 这个实例方法中来循环遍历这个列表 ,循环的时候使用的是map 方法
我们来看页面上的效果:
数据是显示出来了,但是我们看到样式确实是不怎么好看,那么接下来我们就来看看react 项目中如何调试样式,在普通的html 文件中我们知道定义样式的方法很多,内联的样式,定义calss 属性,以及引入外部的css 文件。那么在react 中是否也可以这样写,首先我们来看内联的样式应该怎样写,最为简单,我们标题设置为红色的字体
render(){
return <div>
<h1 style={{color:'red'}}>下面是评论列表</h1>
{
this.state.commentList.map((item,index)=>{
return <CmtOne key ={item.id} {...item}></CmtOne>
})
}
</div>
}
}
样式自然是正确的显示了,字体变成红色的了,上面也就是我们常用到的内联样式,我们具体来分析一下:
<h1 style={{color:'red'}}>下面是评论列表</h1>
style={{}}
这个立方是用两个大括号把我们平时常常写的样式放进里面,需要注意的是平时我们的css 中
font-size 这个时候应该写成fontSize 中间的线应该去掉
比如:
<h1 style={{color:'red',fontSize:'18px',textAlign:'center'}}>下面是评论列表</h1>
css 常常写到的那些样式是放到了{{}} 里面,而且样式之间是用“,” 进行分割
上面就和我们平时说的内联样式是一样的。那么我们在这个继续上继续来学习,我们是可以把样式提取出来写成这样:
const title={color:'red',fontSize:'18px',textAlign:'center'}
<h1 style={title}>下面是评论列表</h1>
当然也是可以的所以这个地方我们就把样式和标签分开了
我们来定义其他的样式:
render(){
const title={color:'red',fontSize:'1.5rem',textAlign:'center'}
return <div>
<h1 style={title}>下面是评论列表</h1>
{
this.state.commentList.map((item,index)=>{
return <div key={item.id} style={{paddingLeft:'10px',border:'2px solid #ccc',marginBottom:'10px'}}>
<h1 style={{fontSize:'1.0rem',color:'blue'}}>评论人: {item.user}</h1>
<p>评论内容: {item.content}</p>
</div>
})
}
</div>
}
效果如下:
我们来分析上面的样式部分:
只有第一个h1标签的样式,我们放到外边了,其他的还是放到了里面,那么我们是否可以把所有的都放到外面:
既然都放到了外面,效果也一样,下面,我们继续可以把这些样式都封装成为一个对象:
我们又一次的完成了封装,现在把三个样式都封装成了一个styles 对象,然后我们在使用的时候
style={styles.title} --完成了样式的使用
上面我们成功的把样式封装成为了一个对象,接下来我们要做的事情是把这个对象拿出去,新建一个 js 文件:css.js
const styles={
title:{color:'red',fontSize:'1.5rem',textAlign:'center'},
mydiv:{paddingLeft:'10px',border:'2px solid #ccc',marginBottom:'10px'},
cmtuser:{fontSize:'1.0rem',color:'blue'}
}
export default styles
在index.js 中引入css.js
import styles from '@/components/css'
....
....
return <div>
<h1 style={styles.title}>下面是评论列表</h1>
{
this.state.commentList.map((item,index)=>{
return <div key={item.id} style={styles.mydiv}>
<h1 style={styles.cmtuser}>评论人: {item.user}</h1>
<p>评论内容: {item.content}</p>
</div>
})
}
</div>
这样能够实现页面的渲染
那么到这个地方我们来分析,我们为了实现样式,采用了三种的方式去,其实是一种,只是三种不同的表现形式
其一:我们在创建标签的时候创建样式: style={{color:'red'}}
其二:我们将样式抽离为一个对象 比如:const obj={color:'red'} style={obj}
其三:三和二类似的,我们多个标签都有的样式抽离为一个对象 style={style.title}
其四: 我们把样式抽离出来形成一个js 文件,然后导入这个js 文件,然后采用其三的方式使用
其实上面到底还是离不开style ,算是属于内联的样式,我们不仅要想的是,其实在html 年很多样式都是使用的 .css 文件,然后给calss 进行赋值,那么在React中应该如何实现,且听下期分解
希望对你有所帮助