玩转React样式.docVIP

玩转React样式 很久很久以前，就有人用CSS来时给HTML内容添加样式。CSS可以最大限度的分离样式和内容，选择器也可以很方便的给某些元素添加样式。你根本找不到任何不用CSS的理由。 但是在React这里就是另外一回事了，虽然React不是不用CSS。但是，它在给元素添加样式的时候方式不同。React的核心哲学之一就是让可视化的组件自包含，并且可复用。这就是为什么HTML元素和Javascript放在一起组成了Component（组件）。 React的自包含组件需要在定义的时候就定义好样式，这样才能实现自包含。本文即将带你学习如何给React的组件添加样式，当然其中包括如何使用CSS。两个都会讲到，虽然React不鼓励这样。 准备工作 要在HTML也中使用React有两种方法，一个是使用Webpack编译打包，另一个是使用网页直接添加React相关js文件。 用webpack来编译、打包React组件。并在一个index.html的页面中使用该代码。具体的准备步骤可以看这里。最后打包到一个叫做bundle.js的文件中。HTML页面看起来是这样的： html head meta charset=utf-8 titleAdd style to React/title /head body div id=content / script src=public/bundle.js type=text/javascript/script span style=float:centerYo!/span /body /html 也可以在网页中直接使用React的js代码。 html head meta charset=utf-8 titleAdd style to React/title !-- 所需要引入的React及相关js -- script src=/react@15.3.1/dist/react.js/script script src=/react-dom@15.3.1/dist/react-dom.js/script script src=/babel-core@5.8.38/browser.min.js/script script src=/jquery@3.1.0/dist/jquery.min.js/script !-- end -- /head body div id=content / !-- 我们自己的js -- script src=public/bundle.js type=text/javascript/script span style=float:centerYo!/span /body /html jquery文件可以不用添加，这里用jquery是用来请求服务器的，暂时用不到。 无论使用哪一种方式。最后在页面中使用的js都是bundle.js。如果用了webpack的方式，那么bundle.js就是由webpack便已打包生成的。如果用的第二种方法，那么bundle.js就是我们自己手动编写的js代码。 div id=content /React生成的HTML元素都会放在这个div里面。 项目结构 使用Webpack的话，项目的整体结果是这样的： -webapp |--public // webpack 编译打包后的js文件所在目录 |--css // css文件所在的目录 |--src // 使用React编写的代码所在目录 |--index.html // 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 App extends React.Component { constructor(props) { super(props); this.state = {u