玩转React样式

1、玩转React样式很久很久以前，就有人用CSS来时给HTML内容添加样式。CSS可以最大限度的分离样式和内容，选择器也可以很方便的给某些元素添加样式。你根本找不到任何不用CSS的理由。但是在React这里就是另外一回事了，虽然React不是不用CSS。但是，它在给元素添加样式的时候方式不同。React的核心哲学之一就是让可视化的组件自包含，并且可复用。这就是为什么HTML元素和Javascript放在一起组成了Component（组件）。React的自包含组件需要在定义的时候就定义好样式，这样才能实现自包含。本文即将带你学习如何给React的组件添加样式，当然其中包括如何使用CSS。两个都会讲

2、到，虽然React不鼓励这样。准备工作要在HTML也中使用React有两种方法，一个是使用Webpack编译打包，另一个是使用网页直接添加React相关js文件。用webpack来编译、打包React组件。并在一个index.html的页面中使用该代码。具体的准备步骤可以看这里。最后打包到一个叫做bundle.js的文件中。HTML页面看起来是这样的： Add style to React Yo! 也可以在网页中直接使用React的js代码。 Add style to React script src= script src= script src= script src= Yo! jquer

3、y文件可以不用添加，这里用jquery是用来请求服务器的，暂时用不到。无论使用哪一种方式。最后在页面中使用的js都是bundle.js。如果用了webpack的方式，那么bundle.js就是由webpack便已打包生成的。如果用的第二种方法，那么bundle.js就是我们自己手动编写的js代码。React生成的HTML元素都会放在这个div里面。项目结构使用Webpack的话，项目的整体结果是这样的：-webapp |-public / webpack 编译打包后的js文件所在目录 |-css / css文件所在的目录 |-src / 使用React编写的代码所在目录 |-index.htm

4、l / HTML页面如果你使用网页内部加载React的话，那么就直接在public目录下创建一个bundle.js文件，并在index.html引用即可。我们就以一个用户登录的界面喂例子。登录，用户需呀输入用户名、密码，然后点击登录按钮。React代码我们来看看要实现这个功能React代码应该什么样的。import React from react;import render from react-dom;import LabeledInputText from ./LabeledInputText;import SubmitButton from ./SubmitButton;class A

5、pp extends React.Component constructor(props) super(props); this.state = un: , pwd: ; this.handleLogin = this.handleLogin.bind(this); this.handleUserNameChanged = this.handleUserNameChanged.bind(this); this.handlePasswordChanged = this.handlePasswordChanged.bind(this); handleUserNameChanged(un) this

6、.setState(un: un); handlePasswordChanged(pwd) this.setState(pwd: pwd); handleLogin() / $.ajax( / url: ps.url, / dataType: json, / method: POST, / data: this.state, / cache: false, / success: function(data) / this.setState(data: data); / .bind(this), / error: function(xhr, status, err) / cons

7、ole.error(ps.url, status, err.toString(); / .bind(this) / ); alert($this.state.un, $this.state.pwd); render() var divStyle = color: blue, wdith: 150px, paddingTop: 10px, display: inline-block ; return ( Yo, React ); render(, document.getElementById(content);/ LabeledInputTextimport React fro

8、m react;export default class LabeledInputText extends React.Component constructor(props) super(props); this.handleTextChange = this.handleTextChange.bind(this); handleTextChange(e) if (ps.labelText.toLowerCase() = username) ps.onUserNameChanged(e.target.value); else ps.onPass

9、wordChanged(e.target.value); render() return ( $ps.labelText : ); / SubmitButtonimport React from react;export default class SubmitButton extends React.Component constructor(props) super(props); / this.state = value: ; / bind event handler this.handleLogin = this.handleLogin.bind(this); hand

10、leLogin(e) / this.setState(value: e.target.value); / alert(hello react); ps.onLogin() render() return ( ); App类是这个登录界面的整体。里面的HTML元素可以分为两类，一个是label和label后面的输入框，另一类是提交按钮。LabeledInputText是label和输入框的组合。SubmitButton是提交按钮。生成出来的HTML页面是这样的： Add style to React Yo, React Username : Password : 在添加样式之后，

11、效果是这样的：使用CSS添加样式在React组件上使用CSS样式比你想的还要简单。因为最终React还是把组件都转化成了HTML元素，而你会的各种CSS技巧一样都可以作用在这些元素上。但是还是有一些小小的地方需要注意：理解生成的HTML在使用CSS之前，你需要知道React生成的HTML元素是什么样子的。看起来很容易理解，因为JSX语法和HTML元素非常接近。import React from react;import render from react-dom;import LabeledInputText from ./LabeledInputText;import SubmitButto

12、n from ./SubmitButton;class App extends React.Component constructor(props) super(props); this.state = un: , pwd: ; render() var divStyle = color: blue, wdith: 150px, paddingTop: 10px, display: inline-block ; return ( / /* Yo, React */ ); render(, document.getElementById(content);在render方法里的就是整体的Reac

13、t组件的结构。所有的东西都在一个div里面。LabeledInputText就是一个文字Label和一个input的文本输入框的组合。SubmitButton是一个可以点击的按钮，这里其实是一个含有click事件的div。全部组件生成HTML之后： Username : Password : Click 里面一些div包含的各种元素，就如前文所说的一样。另外还有的就是很多的css的class。React中使用CSS首先添加css样式文件：input:focus outline: none !important; border:1px solid red; /*box-shadow: 0 0 1

14、0px #719ECE;*/.box-group width:230px; border: 1px solid blue; padding:5px; margin: 10px;.form-control padding:5px;.form-under margin-top:10px;.form-button display:block; background-color:red; text-align: center;上面就是main.css文件包含的全部的样式。这些样式主要是给登录的整个界面元素的边框设置为蓝色，然后在用户名、密码和登录按钮之间增加间距，最后给按钮指定背景色为红色。接下来需要

15、在React的组件中使用这些样式。但是直接使用class是不行的。毕竟JSX和HTML元素是有区别的。就以登录按钮为例： ps.title在React中指定class名称使用className。React的className最后就会转化成HTML的class。这个登录按钮的样式有一点复杂：className=form-control form-under form-button使用了三个不同的css的selector。这些selector的样式都会应用到这个登录按钮上。用React的方式来添加样式React推崇的是内联的方式定义样式。这样做的目的就在于让你的组件更加的容易复用。

16、和组件相关的全部内容聚合到一起，包括你的组件看起来是什么样的，是如何工作的。下面就把之前添加的全部的样式className都去掉，回到最开始的状态。/* index.js */ /* Yo, React */ /*LabeledInputText*/ $ps.labelText : /*SubmitButton*/ ps.title登录使用的三个组件的render方法返回的内容的className已经全部都去掉了。要往React组件内添加一个自定义的样式对象，这个对象包含的就是css样式的名称和样式的值。只不过样式的名称不是css的background-colo

17、r而是JSX的backgroundColor。例如：let divStyle = width:230px, border: 1px solid blue, padding:5px, margin: 10px;return ( /* Yo, React */ );小贴士在React里注释不能用HTML的方式，那是木有用的。也不能直接用js的注释，那也是不行的。而是用大括号括起来，之后用/*/来注释。看起来是这样的/* 这是一个注释 */。divStyle就是我们定义的样式对象。要使用这个样式，只要在React组件中给style赋值。如：style=divStyle。让样式可以自定义要让组件的子组

18、件的某些样式可以自定义很简单。只需要使用React组件的props。比如，我现在想要定制不同的用户名、密码输入框的边框颜色。 /* Yo, React */ 之后在LabeledInputText文件中：styleObj = Object.assign(, this.pwdStyle, border: 1px solid + ps.bordercolor);每次需要用到边框值的时候都从props里面取：ps.bordercolor。根据不同的状态显示不同颜色HTML的文本输入框有两种状态，focused和blured。用户要输入内容的时候，文本框就在focus的状态下。用户的焦点移开，比如开始输入密码的时候，用户名的文本框就在blur状态下了。在focus的状