React 项目----内联样式style的使用 （12）

在此我们之前学习了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中应该如何实现，且听下期分解

希望对你有所帮助