Fassen Sie das Beispiel-Tutorial zum Festlegen des CSS-Stils in ReactJs zusammen-js-Tutorial-php.cn

Fassen Sie das Beispiel-Tutorial zum Festlegen des CSS-Stils in ReactJs zusammen

零下一度

Freigeben： 2017-06-17 17:25:42

Original

1110 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Methode zum Festlegen des CSS-Stils in ReactJs vor. Jetzt werde ich ihn mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

Ich habe React Native vor einiger Zeit gesehen, aber ich habe das Gefühl, dass die Entwicklung auf Android noch nicht ausgereift ist. Es gibt viele Funktionen, die verbessert werden müssen, und ich habe einige Module verbessert Während der eigentlichen Bewerbung bin ich auf unbekannten Widerstand gestoßen und konnte online nicht so viele Ressourcen finden. Deshalb habe ich beschlossen, es für eine Weile beiseite zu legen und zu ReactJs zurückzukehren Das traditionelle Denken von HTML wurde untergraben, und der Code ist grundsätzlich im Tag geschrieben. Natürlich können Sie auch Atom oder Webstor verwenden Wenn Sie IDEA verwenden, müssen Sie die Sprache und das Framework in den Einstellungen

Javascript

festlegen. Die Sprachversion ist JSX Harmony. Andernfalls meldet der Editor möglicherweise einen Fehler für Ihre korrekte Syntax

Im HTML-Datei-Header-Tag können Sie mit der React-Entwicklung beginnen. Da die Ajax-Anfrage jedoch bequemer ist, kann ich JQuery hier natürlich auch zitieren Kapseln Sie selbst eine Ajax-ähnliche Methode oder verwenden Sie native HTTP-Anfragen, um mit dem Hintergrund zu interagieren.

Heute sprechen wir hauptsächlich über das Problem der Einstellung des Reaktionsstils:

<script src="../js/react.js"></script>

<script src="../js/react-dom.js"></script>

<script src="../js/browser.min.js"></script>

<script src="../js/jquery-1.7.2.min.js"></script>

Nach dem Login kopieren

Wie im obigen Code gezeigt, gibt es meiner Meinung nach drei Möglichkeiten, den Stil festzulegen:

1 Wie im blauen Schriftartteil gezeigt, schreiben Sie den Inline-Stil direkt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Js</title>
  <script src="../js/react.js"></script>
  <script src="../js/react-dom.js"></script>
  <script src="../js/browser.min.js"></script>
  <script src="../js/jquery-1.7.2.min.js"></script>
  <style rel="stylesheet">
    .hello{
      color: #ffffff;width: 200px;height: 30px;border: none;background-color: #00a0e9;line-height: 30px;text-align: center;font-size: 14px;
      font-family: "Microsoft YaHei UI";cursor: pointer;
    }
    .redBack{
      background-color: #f00;overflow: hidden;
    }
  </style>
</head>
<body>
<p id="msg"></p>
</body>
<script type="text/babel">
  var colorStyle={
    color: &#39;#ffffff&#39;,
      width: 200,height: 30,border: &#39;none&#39;,backgroundColor: &#39;#00a0e9&#39;,textAlign: &#39;center&#39;,fontSize: 14,
  fontFamily: "Microsoft YaHei UI",cursor: &#39;pointer&#39;,float:&#39;left&#39;,lineHeight:&#39;30px&#39;
  };
  var Http=React.createClass({
    getInitialState: function () {
      return{
        videoSrc:"../src/demo1.mp4"
      }
    },
    handPost:function () {
//      var HTTPrequest=new XMLHttpRequest();
//      HTTPrequest.open("GET","/json/city");
//      HTTPrequest.send();
//      HTTPrequest.onreadystatechange =function () {
//        if(HTTPrequest.readyState==4 && HTTPrequest.status==200){
//          console.log(JSON.parse(HTTPrequest.responseText));
//        }
//      }
      $.ajax({
        type:&#39;GET&#39;,
        url:&#39;/json/city&#39;,
        dataType:&#39;json&#39;,
        success: function (data) {
          console.log(data)
        }
      })
    },
    render:function () {
      return(
          <p className="redBack">
            <video src={this.state.videoSrc} style={{float:&#39;left&#39;,width:300,border:&#39;5px solid #ffffff&#39;}} controls="controls"></video>
            <p onClick={this.handPost} style={colorStyle}>点击请求城市资源</p>
          </p>
          )
    }
  });
  ReactDOM.render(
      <Http/>,document.getElementById(&#39;msg&#39;)
  )
</script>
</html>

Nach dem Login kopieren

2. Definieren Sie eine Variable im js-Code und rufen Sie dann die Variable im Element-Tag auf, wie in der roten Schriftart dargestellt.

3 Legen Sie den Klassennamen der Beschriftung fest, z grüner Schriftteil

Ein Screenshot ist unten angehängt:

Das obige ist der detaillierte Inhalt vonFassen Sie das Beispiel-Tutorial zum Festlegen des CSS-Stils in ReactJs zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!