组件的样式

一、样式分类

  1. 内联样式。
  2. 对象样式。
  3. 选择器样式。

二、注意事项:在React和html5中设置样式的书写格式是有一部分区别的

  1. Html5以;结尾     React以,结尾
  2. Html5中key、value都不加引号     React中属于javaScript对象,key的名字中不能出现"-",需要使用驼峰命名法,如果value为字符串,需要加引号
  3. 在HTML5,value如果是数字,需要加单位     React不需要

三、案例

  1. 我们定义一个组件类,同时使用三种实现组件样式的方式
        *定义一个组件类,分为上下两行显示内容
         <div>  内联样式:设置背景颜色、边框大小、边框颜色
           <h1></h1>  对象样式  设置背景颜色,字体颜色
           <p></p>  选择器样式  设置字体大小
         </div>
    
        *注意:在使用选择器样式时,属性名不能使用class,使用className替换
         类似的:使用htmlFor替换For属性
  2. 创建“对象样式”,设置h1对象
    var hStyle = {
      backgroundColor:"green",
      color:"red"
    }
  3. 创建组件类HelloMessage
    var HelloMessage = React.createClass({
      render : function(){
        return(
          <div style = {{background:"yellow",borderWidth:5,borderColor:"black",borderStyle:"solid"}}>
            <h1 style = {hStyle}>{this.props.firstRow}</h1>
            <p className = "pStyle">{this.props.secondRow}</p>
          </div>
        );
      }
    });
  4. 创建“选择器样式”
        <style>
          .pStyle = {
            font-size: 20px
          }
        </style>
  5. 展示插入到DOM标签
    ReactDOM.render(
      <HelloMessage firstRow = "第一行" secondRow = "第二行"/>,
      document.getElementById("container")
    );

四、案例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></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的作用是将JSX语法转换成JavaScrept语法 -->
    <script src="./build/browser.min.js" charset="utf-8"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->

    <style>
      .pStyle = {
        font-size: 20px
      }
    </style>

  </head>
  <body>

<!-- React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
<div id="container">
</div>

  </body>

<!-- 在React开发中,使用JSX语法,与JavaScrpt不兼容,在JSX的地方,要设置一下type为text/babel -->
<!-- babel是一个转换编辑器,把ES6转换成可以在浏览器运行的代码 -->
<script type="text/babel">

// 在此处编写React代码

/*
  创建一个组件类,用于显示Hello React
*/
//1.React中创建的组件类以大写字母开头,遵守驼峰命名法
//2.在React当中用React。createClass创建一个组件类
//3.核心代码:每个组件类都必须实现自己的render方法,输出定义好的组件模板,返回值:null/false/组件模板  这三种
//4.组件类智能包含一个顶层标签

// var HelloMessage = React.createClass({
//   render : function() {
//     return <h1>{this.props.helloText}</h1>
//   }
// });
// 
// ReactDOM.render(
//   //在模板中使用<HelloMessage/>,会自动生成一个实例
//   <HelloMessage helloText = "你好,蓝鸥"/>,
//   document.getElementById("container")
// );

/*
  设置组件的样式
  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>

    *注意:在使用选择器样式时,属性名不能使用class,使用className替换
    * 类似的:使用htmlFor替换For属性
*/

//创建设置h1对象
var hStyle = {
  backgroundColor:"green",
  color:"red"
}

var HelloMessage = React.createClass({
  render : function(){
    return(
      <div style = {{background:"yellow",borderWidth:5,borderColor:"black",borderStyle:"solid"}}>
        <h1 style = {hStyle}>{this.props.firstRow}</h1>
        <p className = "pStyle">{this.props.secondRow}</p>
      </div>
    );
  }
});

ReactDOM.render(
  <HelloMessage firstRow = "第一行" secondRow = "第二行"/>,
  document.getElementById("container")
);

</script>

</html>

五、案例展示

原文链接:加载失败,请重新获取