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中应该如何实现，且听下期分解

希望对你有所帮助

React 项目----内联样式style的使用（12）相关推荐

css vue 内联_vue 内联样式style中的background
在我们使用vue开发的时候有很多时候我们需要用到背景图这个时候会直接使用内联样式直接把你拿到的数据拼接上去注意在vue中直接使用style时花括号一定别忘记还有就是你的url一定 ...
Vue-关于内联样式style绑定
原本准备把style绑定和class绑定写在一起的,但我还是分开了,对class绑定不太清楚的伙伴也可以先去看看上篇Vue-关于class绑定(基础学习)_绍昆ya的博客-CSDN博客关于内联样式s ...
绑定内联样式 :style
绑定内联样式 :style <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题，以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)
(以下情况是通过style设置内联样式以及动态绑定img的src时发生的问题,.在外部css文件和style标签里面定义的样式不会出现以下问题) 我们可能会通过以下这种方式来设置元素的背景(注意元素需 ...
react内联样式_React样式化的组件：内联样式+ 3种其他CSS样式化方法（带有示例）...
react内联样式 There's no one right way to style your React components. It all depends on how complex you ...
react里面内联css样式怎么样_React.js内联样式最佳做法
小编典典目前还没有很多"最佳实践".我们中那些使用内联样式作为React组件的人仍在进行大量试验. 全部还是全部? 我们所称的"样式"实际上包括许多概念: 布 ...
element.style内联样式修改
最近在修改我个人博客的一个样式时发现,无论我如何修改style里面的值,页面上的样式都不会被修改,F12检查一下发现个element.style,但是却找不到这个值在哪里,查资料后才知道element ...
将html中的style内联样式转换为行内样式
需求:因为有一段html需要传递到其他的地方,内联样式可能与其他的样式冲突,所以要将写在style标签中的内联样式转换为行内样式思路: /*** 参数接收html字符串* 将内联样式表里面的样式改为 ...
HTML5_CSS入门（内部样式、外部样式、内联样式、选择器）
1.内部样式.外部样式.内联样式内联方式:样式定义在单个的HTML元素中 CSS语法:只需要将分号隔开的一个或多个属性/值对作为元素的style属性和值: 属性和属性值之间用:链接: 多对属性之间用 ...

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

React 项目----内联样式style的使用（12）相关推荐

最新文章

热门文章

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

React 项目----内联样式style的使用 （12）相关推荐

最新文章

热门文章

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

React 项目----内联样式style的使用（12）相关推荐