组件的样式

一、样式分类

内联样式。
对象样式。
选择器样式。

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

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

三、案例

我们定义一个组件类，同时使用三种实现组件样式的方式

    *定义一个组件类，分为上下两行显示内容
     <div>  内联样式：设置背景颜色、边框大小、边框颜色
       <h1></h1>  对象样式  设置背景颜色，字体颜色
       <p></p>  选择器样式  设置字体大小
     </div>

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

创建“对象样式”，设置h1对象

var hStyle = {
  backgroundColor:"green",
  color:"red"
}

创建组件类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>
    );
  }
});

创建“选择器样式”

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

展示插入到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>

一、样式分类

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

三、案例

四、案例代码

五、案例展示

猜你喜欢