初学React：组件的样式
React中组件的样式有三种：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React工程模板</title> <!-- react.js 是React的核心库 -->
<script src="./build/react.js charset="utf-8"></script>
<!-- react-dom.js是作用是提供与DOM相关的功能 -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js 的作用是将JSCX语法转换成Javascript的语法 -->
<script src="./build/browser.min.js" charset="utf-8"></script>
<!-- 还可以直接通过网址引入browser.min.js文件 -->
<!-- 比如：<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> --> <style>
.pStyle {
font-size:30px;
}
</style> </head>
<body>
<!-- React渲染的模板内容会插入到这个DOM节点中，作为一个容器 -->
<div id="container"> </div> <!-- 在React开发中，使用JSX，跟Javascript不兼容，在使用JSX的地方，要设置type：text/babel -->
<!-- babel是一个转换编译器，把ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel"> <!-- 在此处编写React代码 --> <!--
设置组件样式，讲解三种：
1、内联样式
2、对象样式、
3、选择器样式 注意：在React和HTML5中设置样式时的书写格式是有区别的
*1、HTML5以;结尾
* React以,结尾
*2、HTML5中key、value都不加引号
* React中属于Javascript对象，key的名字不能出现"-",需要使用驼峰命名法。
如果value为字符串，需要加引号。
*3、HTML5中，value如果是数字，需要带单位
* React中不需要带单位 *我们定义一个组件类，同时使用三种设置组件样式的方式
需求：定义一个组件，分为上下两行显示内容 <div> 内联样式：设置背景颜色、边框大小、边框颜色
<h1></h1> 对象样式：设置背景颜色、字体颜色
<p></p> 选择器样式：设置字体大小
</div> 注意：在React中使用选择器设置组件样式时，属性名不能使用class，需要使用className替换
（因为class在React中是一个关键字）
类似的：使用htmlFor替换for
--> var hStyle = {
backgroundColor: "green",
color: "red"
} var ShowMessage = React.createClass({
render: function() {
return (
// 注意；这里的backgroundColor,中间不能加“-”
<div style={{backgroundColor:"yellow", borderWidth:5, borderColor:"brack", broderStyle:"solid"}}>
<h1 style={hStyle}>{this.props.firstRow}</h1>
<p className="pStyle">{this.props.secondRow}</p>
</div>
);
}
}); ReactDOM.render(
<ShowMessage firstRow="你好" secondRow="小豆豆" />,
document.getElementById("container")
); </script> </body>
</html>
初学React：组件的样式的更多相关文章
- react组件配置样式hover效果的实现
需求 react 自定义一个组件,组件内部样式可以灵活配置 问题 一般样式都可以通过属性传入,比如:颜色,字号等,但是对于一些有hover效果的地方,属性传入后,按照平时css的使用方式不太容易实现 ...
- 【react 样式】给react组件指定style
1.使用行内样式(优先级高) 自定义的react组件是没有style属性的,如果要给想给自定义react组件指定style,我的方法是用一个<div>包裹自定义组件,然后给div指定sty ...
- React组件(组件属性this.state和this.props,css样式修饰组件)
目录: 1.创建组件的第一种方式 function2.将组件抽离为单独的jsx文件3.省略.jsx后缀, 配置webpack设置根目录4.创建组件的第二种方式--使用class关键字创建组件5.组件私 ...
- React组件
React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...
- React组件开发
目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.ht ...
- 如何优雅的设计 React 组件
作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...
- 如何优雅的设计React组件
如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...
- wn-cli 像React组件开发一样来开发微信小程序
项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...
- 编写React组件的最佳实践
此文翻译自这里. 当我刚开始写React的时候,我看过很多写组件的方法.一百篇教程就有一百种写法.虽然React本身已经成熟了,但是如何使用它似乎还没有一个"正确"的方法.所以我( ...
随机推荐
- POJ 3734 Blocks（矩阵快速幂+矩阵递推式）
题意:个n个方块涂色, 只能涂红黄蓝绿四种颜色,求最终红色和绿色都为偶数的方案数. 该题我们可以想到一个递推式 . 设a[i]表示到第i个方块为止红绿是偶数的方案数, b[i]为红绿恰有一个是偶数 ...
- php设计模式总结2
策略模式: 定义了算法族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化独立于使用算法的客户. 封装:把行为用接口封装起来,我们可以把那些经常变化的部分,从当前的类中单独取出来,用接口进行单 ...
- 阿里插件检查 lombok报错---方法缺少 '@Override' 注解
问题: Eclipse里,阿里编码规约插件扫描代码出现,但是idea却没有. 解决: 将以上注解改成 @Setter @Getter @NoArgsConstructor @AllArgsConstr ...
- python练习六十五：类的使用实例
代码: class human(): #定义基类,包括属性和方法 def __init__(self,name,eye=2,age=98,city='陕西'): #属性值有四个,分别为name,eye ...
- jdk的环境配置
今天在网上找了关于jdk配置的教程,发现比较繁琐,因此更新下jdk的简单配置教程 注意:jdk的安装必须正确,绝对不允许将jdk和jdr安装在同一层目录!!(建议在java目录下新建jdk和jdr目录 ...
- js网页瀑布流布局
瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...
- Android Studio CMake依赖第三方库
这里实现一个简单的功能在APP里调用libnative-lib.so里的add.libnative-lib.so去调用libthird.so里的third_add来实现 JniUtil public ...
- MOS管
mos工作原理:http://www.360doc.com/content/15/0930/11/28009762_502419576.shtml, 开关特性好,长用于开关电源马达驱动,CMOS相机场 ...
- 牛客网练习赛28A
题目链接:https://www.nowcoder.com/acm/contest/200/A 链接:https://www.nowcoder.com/acm/contest/200/A来源:牛客网 ...
- Unity脚本的生命周期 同一脚本/不同脚本/游戏对象激没激活/脚本激没激活,几种情况下的Awake,OnEnable,Start的执行顺序
可以自己在Unity里面试一下 游戏对象在Hierarchy面板不是激活的,它的脚本没作用,脚本中的函数不会执行; 游戏对象在Hierarchy面板是激活的,脚本没激活,Awake会执行,OnEnab ...