react基础---样式添加＆事件添加_es5 添加样式名-优快云博客

本文介绍了在React中如何添加样式和事件。对于样式添加，需要注意将`class`属性改为`className`，并可以使用行内样式进行设置。事件添加部分讲解了如何定义事件处理函数，如`handlerClick`，并在`render`方法中调用。

一、样式添加

react中添加样式时，class要改成className
在React中，className，class是es6的关键字，es5中同样是保留关键字
行内样式：style={{color:‘green’,fontSize:“30px”}}（横线的都改成驼峰形式）

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="dist/browser.min.js"></script>
    <script src="dist/jquery.js"></script>
    <script src="dist/react.js"></script>
    <script src="dist/react-dom.js"></script>
    <style>

      .container{
        color: red;
      }

    </style>
  </head>
  <body>

    <div id="root">

    </div>
    <script type="text/babel">

      /*
        在React中，className，class是es6的关键字，es5中同样是保留关键字
        行内样式：style={{color:'green',fontSize:"30px"}}
      */

        var Hello = React.createClass({
          render:function(){

            var styleObj = {
              color:'green',
              fontSize:"30px"
            }

            return(
              <div className="container">
                <p>哈哈</p>
                <span style={ styleObj }>hello</span>
              </div>
            )
          }
        })

        ReactDOM.render(<Hello />,document.getElementById("root"))

    </script>

  </body>
</html>

在这里插入图片描述

二、事件添加

handlerClick:function(){},
render:funtion(){return()}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="dist/browser.min.js"></script>
    <script src="dist/jquery.js"></script>
    <script src="dist/react.js"></script>
    <script src="dist/react-dom.js"></script>
  </head>
  <body>

    <div id="root">
    </div>
    <script type="text/babel">
    var Hello = React.createClass({

      handlerClick:function(event){
        console.log("2222");
      },

      render:function(){
        return(
          <div>
            <button onClick={ this.handlerClick }>按钮</button>
          </div>
        )
      }
    })
    ReactDOM.render(<Hello />,document.getElementById("root"))


    </script>

  </body>
</html>