React中style的使用及注意事项(推荐)

目录
  • React中style的使用注意事项
  • 补充：React 组件的 style 样式使用相关问题

React中style的使用注意事项

React中style的使用和直接在HTML中使用有些不同，第一，React中必须是style="opacity:{this.state.opacity};"这种写法，第二如果设置多个style格式如下，多个style中间使用逗号分割。

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

但是在html中我们通常直接使用，多个style中间使用分号;

   <div  style="backgroundColor:#FFFF90; color:#FFFFFF">white text2</div>
    <!-- div标签内使用style属性设置字体颜色 -->
 
     <span  style="backgroundColor:#FFFF90" ><a style="color:#FF00FF"  href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  >nihao</a> </span>

代码示例给出一个表格中文本的颜色和文本框背景颜色的示例：

</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="../build/react.js"></script>
    <script src="../build/JSXTransformer.js"></script>
	<script src="../build/react-bootstrap/react-bootstrap.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="../build/bootstrap/css/bootstrap.min.css" rel="external nofollow" >

  </head>
  <body>
    <div id="example"></div>

	<script type="text/jsx">
	var Table = ReactBootstrap.Table;

        var TableDemo =  React.createClass({
	    render: function() {
		  var textColor = "#CC0000";
		  var bgColor = "#00CC00";
		  return (
            <Table striped bordered condensed hover>
            <thead>
              <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
            <tr>
              <td style={{color: textColor}}>1textColor</td>
              <td style={{color: textColor,backgroundColor:'#00CC00'}}>MarkColorAndbgColor</td>
              <td style={{backgroundColor:bgColor}}>OttobgColor</td>
              <td><a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style={{color: '#CC0000'}}>HrefColor</a></td>
            </tr>

	        <tr>
              <td>2</td>
              <td>Jacob</td>
              <td style={{backgroundColor:'#00CC00'}} > <a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style={{color: '#CC0000'}}>HrefColorAndbgColor</a> </td>
              <td>NameFull2</td>
            </tr>

            <tr>
              <td>3</td>
              <td colSpan="2">Larry the Bird3Column</td>
              <td>@twitter</td>
            </tr>
            </tbody>
          </Table>
		  );
		}
    });

	React.render(<TableDemo/>, document.body);

    </script>

  </body>
</html>

最终效果图如下：

补充：React 组件的 style 样式使用相关问题

组件名内不能使用 style 样式，例如：假设该组建名为 <HelloMessage />，如果我们写成：<HelloMessage style={{color:'red',textAlign:'center'}}/> 这样，那么该组件名是无 style 样式的，也就是说我们刚写的 style 样式，是无效的，因此我们不能把样式写在该组件中！那么我们应该把样式写在哪里呢? 我们应该把样式写在：

function HelloMessage(props) {
    return <h1 style={{color:'red',textAlign:'center'}}>Hello World！</h1>;
}

或者

var myStyle = {color:'red',textAlign:'center'}
class HelloMessage extends React.Component {
    render() {
        return <h1 style={myStyle}>Hello World！</h1>;
    }
}

到此这篇关于React中style的使用注意事项的文章就介绍到这了,更多相关React中style使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React styled-components设置组件属性的方法

    问题 最近在试着用react做一个音乐播放器,在这之前其实并不了解styled-components,但由于使用css in js并且想实现hover效果,百度各种解决方案后发现了styled-components这个好东西,如果你看到了这篇博客,就证明你应该了解或者熟练运用styled-components了. 回到项目开发中,一个音乐播放器应该由多个组件组成,其中有一个list组件用于展示歌曲列表,就像这样 鹅...好像暴露了我的喜好... 每一列就是一个div(当然ul也是可以的),为了方

  • React styled components样式组件化使用流程

    目录 安装 基本使用 props传值修改样式 样式化组件 样式扩展 动画 将style样式写在同一个文件中并且组件化使用. 安装 npm i styled-components 基本使用 const 样式组件名=引入的styled-components.替代的标签(支持sass写法) 再使用样式组件名将标签包裹起来即可 import React, { Component } from 'react'; import styled from 'styled-components'; class A

  • 解决React报错Style prop value must be an object

    目录 总览 映射 提取 总览 在React中,当我们为元素的style 属性传递字符串时,会产生"Style prop value must be an object"警告.为了解决该警告,使用从属性到值的映射.比如说,style={{paddingLeft: '15px'}} . 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Style prop value must be an object eslint(reac

  • React中styled-components的使用

    目录 一.官网地址 二.styled-components 三.基本使用 四.全局默认样式引入 五.传参 六.继承 七.修改组件内部标签 八.定义组件属性 九.背景图片引入 十.塑造组件 十一.动画```javascript 十二.当标签过多时需要划分太多组件,我们可以通过以下写法来简化组件的编写 一.官网地址 https://www.styled-components.com/ 二.styled-components 1.styled-components 样式化组件,主要作用是它可以编写实际

  • React中style的使用及注意事项(推荐)

    目录 React中style的使用注意事项 补充:React 组件的 style 样式使用相关问题 React中style的使用注意事项 React中style的使用和直接在HTML中使用有些不同,第一,React中必须是style="opacity:{this.state.opacity};"这种写法,第二如果设置多个style格式如下,多个style中间使用逗号分割. var divStyle = { color: 'white', backgroundImage: 'url('

  • React中useState的使用方法及注意事项

    React中useState的使用方法及注意事项

    目录 一.基本使用 第一个问题:setCount修改值时它是同步还是异步? 第二个问题:连续调用 setCount会发生什么? 二.注意事项 1.复杂变量的修改 2.异步操作获取更新的值 总结 一.基本使用 useState是 react 提供的一个定义响应式变量的 hook 函数,基本语法如下: const [count, setCount] = useState(initialCount) 它返回一个状态和一个修改状态的方法,状态需要通过这个方法来进行修改: initialCount 是我们

  • 详解如何在react中搭建d3力导向图

    D3js力导向图搭建 d3js是一个可以基于数据来操作文档的JavaScript库.可以使用HTML,CSS,SVG以及Canvas来展示数据.力导向图能够用来表示节点间多对多的关系. 实现效果:连线有箭头,点击节点能改变该节点颜色和所连接的线的粗细,缩放.拖拽. 版本:4.X 安装和导入 npm安装:npm install d3 前端导入:import * as d3 from 'd3'; 一.完整代码 import React, { Component } from 'react'; imp

  • react中使用css的7中方式(最全总结)

    第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import React, { Component } from "react"; const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", //驼峰法 minHeight: "200px", boxSizing: &

  • 浅谈React中组件逻辑复用的那些事儿

    基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码.那么 React 是怎么复用组件逻辑的呢?本文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获.如果你对这些内容已经非常清楚,那么略过本文即可. 我已尽量对文中的代码和内容进行了校验,但是因为自身知识水平限制,难免有错误,欢迎在评论区指正. 1. Mixins Mixins 事实上是 React.createClass 的产物了.当然,如果你曾经在低版本的 react 中使用过 Mixins,

  • 简单谈谈React中的路由系统

    简单谈谈React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL.本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL. react-router的最新版本是v4.1.1,由于4.0版本和之间的版本A

  • 关于react中组件通信的几种方式详解

    关于react中组件通信的几种方式详解

    前言 刚入门React可能会因为React的单向数据流的特性而遇到组件间沟通的麻烦,下面这篇文章就来给大家详细介绍下,在开始之前先来看一张图: react组件通信 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1. 父组件向子组件通信 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息 Child.jsx import React from 'react'; import Pro

  • React中常见的动画实现的几种方式

    React中常见的动画实现的几种方式

    现在,用户对于前端页面的要求已经不能满足于实现功能,更要有颜值,有趣味.除了整体 UI 的美观,在合适的地方添加合适的动画效果往往比静态页面更具有表现力,达到更自然的效果.比如,一个简单的 loading 动画或者页面切换效果不仅能缓解用户的等待情绪,甚至通过使用品牌 logo 等形式,默默达到品牌宣传的效果. React 作为最近几年比较流行的前端开发框架,提出了虚拟 DOM 概念,所有 DOM 的变化都先发生在虚拟 DOM 上,通过 DOM diff 来分析网页的实际变化,然后反映在真实 D

  • 详解React中key的作用

    详解React中key的作用

    要了解React中key的作用,可以从key的取值入手,key的取值可以分为三种,不定值.索引值.确定且唯一值 在下面的代码中,key的取值是不定值(Math.random()) 问题: 点击按钮的时候,span的颜色会变成红色吗? import React, { useState } from 'react'; function App() { const [initMap, setInitMap] = useState([1,2,3,4]); const handleClick = () =

  • React中使用setInterval函数的实例

    本文是基于Windows 10系统环境,学习和使用React:Windows 10 一.setInterval函数 (1) 定义 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. (2) 实例 import React, { Component } fr

随机推荐