<五>React组件样式

作者: 者薄 | 来源:发表于2017-05-01 00:42 被阅读0次

<五>React组件样式
react基础
react组件的样式编写
React: 富文本
使用 React 的 CSS 模块指南
React16.13 简单封装一个input组件
React Native - View组件
react 分页组件pagination
Flutter 组件样式
Reactjs中开源幻灯片组件react-image-galle

理论理解

图片.png

代码实现

<!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="hello">

    </div>
    <div id="hello1">

    </div>
  </body>
  <script type="text/babel">
    /*
      创建一个组件类:
      1.React中的组件类和java中的一样,首字母大写,驼峰命名法规则
      2.在React中使用creacteClass方法创建组件类
      3.每个组件类必须实现自己的render方法,输出定义好的组件模板,返回值:null,false,组件模板
      4.注意:组件类只能包含一个顶层标签
    */
    //注意:React.createClass---atom软件自动提示的有问题
    var HelloMessage = React.createClass({
      render: function() {
        return <h1>haha</h1>;
      }
    });

    ReactDOM.render(
      <HelloMessage />,
      document.getElementById("hello")
    );

    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('hello1')
    );
  </script>
</html>