总结ReactJs设置css样式的实例教程
本篇文章主要介绍了ReactJs设置css样式的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前段时间看了React Native,但是感觉在安卓反面的开发并不成熟.有较多功能有待完善,而且自己在实际运用的过程中在一些模块上遇到了不晓得阻力,又苦于网上没有找到那么多资源.于是打算先放一段时间,还是回过头来看ReactJs吧.
React颠覆了html的传统思维,代码基本都写在标签里面.我开发的时候采用的是IDEA,当然也可以使用atom或者webstor.使用IDEA时,需要在settings里面的Language & Framework设置Javascript language version为JSX Harmony.否则,编辑器可能会对你的正确语法进行报错.
<script src="../js/react.js"></script> <script src="../js/react-dom.js"></script> <script src="../js/browser.min.js"></script> <script src="../js/jquery-1.7.2.min.js"></script>
html文件header标签里面引用上面前三个文件,就可以进行react开发了,但是由于jquery的ajax请求比较方便,所以这里我引用了jquery,当然也可以自己封装一个类似于ajax的方法,或者使用原生http请求与后台交互.
今天主要说说设置react样式的问题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Js</title>
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/browser.min.js"></script>
<script src="../js/jquery-1.7.2.min.js"></script>
<style rel="stylesheet">
.hello{
color: #ffffff;width: 200px;height: 30px;border: none;background-color: #00a0e9;line-height: 30px;text-align: center;font-size: 14px;
font-family: "Microsoft YaHei UI";cursor: pointer;
}
.redBack{
background-color: #f00;overflow: hidden;
}
</style>
</head>
<body>
<p id="msg"></p>
</body>
<script type="text/babel">
var colorStyle={
color: '#ffffff',
width: 200,height: 30,border: 'none',backgroundColor: '#00a0e9',textAlign: 'center',fontSize: 14,
fontFamily: "Microsoft YaHei UI",cursor: 'pointer',float:'left',lineHeight:'30px'
};
var Http=React.createClass({
getInitialState: function () {
return{
videoSrc:"../src/demo1.mp4"
}
},
handPost:function () {
// var HTTPrequest=new XMLHttpRequest();
// HTTPrequest.open("GET","/json/city");
// HTTPrequest.send();
// HTTPrequest.onreadystatechange =function () {
// if(HTTPrequest.readyState==4 && HTTPrequest.status==200){
// console.log(JSON.parse(HTTPrequest.responseText));
// }
// }
$.ajax({
type:'GET',
url:'/json/city',
dataType:'json',
success: function (data) {
console.log(data)
}
})
},
render:function () {
return(
<p className="redBack">
<video src={this.state.videoSrc} style={{float:'left',width:300,border:'5px solid #ffffff'}} controls="controls"></video>
<p onClick={this.handPost} style={colorStyle}>点击请求城市资源</p>
</p>
)
}
});
ReactDOM.render(
<Http/>,document.getElementById('msg')
)
</script>
</html>如上代码所示,我觉得设置样式有三种方法:
1.如蓝色字体部分所示,直接写行内样式
2.在js代码中定义一个变量,然后在元素标签内部调用变量,如红色字体所示.
3.设置标签的className,如绿色字体部分
下面附上截图:
以上是总结ReactJs设置css样式的实例教程的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
bootstrap按钮怎么用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本
bootstrap怎么调整大小
Apr 07, 2025 pm 03:18 PM
要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-
bootstrap怎么插入图片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。
bootstrap如何上传文件
Apr 07, 2025 pm 01:09 PM
可以通过 Bootstrap 实现文件上传功能，步骤如下：引入 Bootstrap CSS 和 JavaScript 文件；创建文件输入字段；创建文件上传按钮；处理文件上传（使用 FormData 收集数据，然后发送到服务器）；自定义样式（可选）。
bootstrap导航栏怎么设置
Apr 07, 2025 pm 01:51 PM
Bootstrap 提供了设置导航栏的简单指南：引入 Bootstrap 库创建导航栏容器添加品牌标识创建导航链接添加其他元素（可选）调整样式（可选）
bootstrap日期怎么验证
Apr 07, 2025 pm 03:06 PM
在 Bootstrap 中验证日期，需遵循以下步骤：引入必需的脚本和样式；初始化日期选择器组件；设置 data-bv-date 属性以启用验证；配置验证规则（如日期格式、错误消息等）；集成 Bootstrap 验证框架，并在表单提交时自动验证日期输入。
bootstrap怎么设置框架
Apr 07, 2025 pm 03:27 PM
要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。
Bootstrap列表如何移除默认样式？
Apr 07, 2025 am 10:18 AM
Bootstrap 列表的默认样式可以通过 CSS 覆盖来移除。使用更具体的 CSS 规则和选择器，遵循 "就近原则" 和 "权重原则"，覆盖 Bootstrap 默认的样式。为避免样式冲突，可使用更具针对性的选择器。如果遇到覆盖不成功的情况，可调整自定义 CSS 的权重。同时注意性能优化，避免过度使用 !important，撰写简洁高效的 CSS 代码。
