zoukankan      html  css  js  c++  java
  • ReactNative--组件的样式

    设置组件的样式,讲解三种:
    1 内联样式
    2 对象样式
    3 选择器样式

    注意:在React和HTML5中设置样式时的书写格式是有一定区别的
    1 HTML5以;结尾
    React以,结尾
    2 HTML中key,value都不加引号
    React中属于JavaScript对象,key的名字不能出现"-",需要使用驼峰命名法。如果value为字符串,需要加引号
    3 HTML5中,value如果是数字,需要带单位
    React中不需要带单位

    我们定义一个组件类,同事使用三种设置组件样式的方法
    需求:定义一个组件,分为上下两行显式内容
    <div> 内联样式:设置背景颜色,边框大小,边框颜色
    <h1></h1> 对象样式:设置北京颜色,字体颜色
    <p></p> 选择器样式:设置字体大小
    </div>
    注意:在React中使用选择器样式设置组件样式时,属性名不能使用class,需要使用className替换
    类似的:使用htmlFor替换for

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
    
        <script src="./build/react.js" charset="utf-8"></script>
        <script src="./build/react-dom.js" charset="utf-8"></script>
        <script src="./build/browser.min.js" charset="utf-8"></script>
    
        <style>
          .pStyle {
            font-size: 20px;
          }
        </style>
    
      </head>
    
      <body>
        <div id="container"></div>
      </body>
    
      <script type="text/babel">
    
    
        //创建设置h1样式对象
        var hStyle = {
          backgroundColor:"green",
          color:"red"
        }
        var ShowMessage = React.createClass({
          render:function () {
            return (
              <div style={{backgroundColor:"yellow", borderWidth:5, borderColor:"black", borderStyle:"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>
    
    
    </html>
  • 相关阅读:
    python函数
    python3基础4
    布尔值常识
    字典常用魔法方法
    字典相关常识
    元组相关常识
    列表及其魔法方法(list类中提供的方法)
    列表相关常识
    day11练习题
    字符串相关常识
  • 原文地址:https://www.cnblogs.com/chebaodaren/p/6426111.html
Copyright © 2011-2022 走看看