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

末蓝、 2022-09-04 02:51 355阅读 0赞

在此我们之前学习了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 方法

我们来看页面上的效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

数据是显示出来了，但是我们看到样式确实是不怎么好看，那么接下来我们就来看看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>
         }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

样式自然是正确的显示了，字体变成红色的了，上面也就是我们常用到的内联样式，我们具体来分析一下：

<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>
         }

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

我们来分析上面的样式部分：

只有第一个h1标签的样式，我们放到外边了，其他的还是放到了里面，那么我们是否可以把所有的都放到外面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]

既然都放到了外面，效果也一样，下面，我们继续可以把这些样式都封装成为一个对象：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4][]

我们又一次的完成了封装，现在把三个样式都封装成了一个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>

这样能够实现页面的渲染

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5][]

那么到这个地方我们来分析，我们为了实现样式，采用了三种的方式去，其实是一种，只是三种不同的表现形式

其一：我们在创建标签的时候创建样式: style=\{ \{color:'red'\}\}

其二：我们将样式抽离为一个对象 比如：const obj=\{color:'red'\}  style=\{obj\}

其三：三和二类似的，我们多个标签都有的样式抽离为一个对象 style=\{style.title\}

其四: 我们把样式抽离出来形成一个js 文件，然后导入这个js 文件，然后采用其三的方式使用

其实上面到底还是离不开style ，算是属于内联的样式，我们不仅要想的是，其实在html 年很多样式都是使用的 .css 文件，然后给calss 进行赋值，那么在React中应该如何实现，且听下期分解

希望对你有所帮助

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/0d72dee40c39484d91b3c9d7cc2bf277.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/192c1383c517469e9fe1e4b217097227.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/2ce393aeaf4542dcbea4a59f43b28158.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: /images/20220829/b656878477384fc39863c2dedf96d059.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4]: /images/20220829/d6435cb097804e27b7ac5bcfb615a463.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5]: /images/20220829/88759730beb241e98d1e869650e8b096.png