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

更新时间：2023年02月20日 10:02:50 作者：russle

React中style的使用和直接在HTML中使用有些不同，第一，React中必须是style="opacity:{this.state.opacity};"这种写法，第二如果设置多个style格式如下，多个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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React Router V6更新内容详解
这篇文章主要为大家介绍了React Router V6更新内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
详解react服务端渲染（同构）的方法
这篇文章主要介绍了详解react服务端渲染（同构）的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
React精髓！一篇全概括小结(急速)
这篇文章主要介绍了React精髓！一篇全概括小结(急速)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
React组件化学习入门教程讲解
React是现在前端使用频率最高的三大框架之一，React率先提出虚拟DOM的思想和实现，使其保持有良好的性能。本篇文章将对React组件化的入门学习进行讲解，同时针对模块化的思想进行概述，为接下来组件化开发的文章进行知识储备
2022-09-09
React虚拟渲染实现50个或者一百个图表渲染
这篇文章主要为大家介绍了React虚拟渲染实现50个或者100个图表渲染的实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
React中常用的Hook有哪些
这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定，节后实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-01-01
React 三大属性之state的使用详解
这篇文章主要介绍了React 三大属性之state的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
2021-04-04
React高级概念之Context用法详解
在React应用中，为了让数据在组件间共享，常见的方式是让它们以props的形式自顶向下传递，如果数据要在组件树不同层级共享，那么这些数据必须逐层传递直到目的地，Context如同管道，它将数据从入口直接传递到出口，使用Context能避免“prop-drilling”
2023-06-06
react解析html字符串方法实现
在使用reactjs库的时候,会遇到将一段html的字符串,然后要将它插入页面中以html的形式展现,本文主要介绍了react解析html字符串方法实现,感兴趣的可以了解一下
2023-12-12
React Native性能优化指南及问题小结
本文将介绍在React Native开发中常见的性能优化问题和解决方案,包括ScrollView内无法滑动、热更新导致的文件引用问题、高度获取、强制横屏UI适配、低版本RN适配iOS14、缓存清理、navigation参数取值等,感兴趣的朋友一起看看吧
2024-01-01