Maison >interface Web >js tutoriel >Résumez l'exemple de didacticiel de définition du style CSS dans ReactJs

Résumez l'exemple de didacticiel de définition du style CSS dans ReactJs

零下一度original: 2017-06-17 17:25:421097parcourir

Cet article présente principalement la méthode de définition du style CSS dans ReactJs. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

J'ai regardé React Native il y a quelque temps, mais j'ai l'impression que le développement sur Android n'est pas mature. Il y a de nombreuses fonctions à améliorer, et j'ai amélioré certains modules. en cours de candidature, j'ai rencontré une résistance inconnue sur Internet et je n'ai pas trouvé autant de ressources en ligne. J'ai donc décidé de le mettre de côté pendant un moment et de revenir sur ReactJs. a renversé la pensée traditionnelle du HTML, et le code est essentiellement écrit dans la balise 34b4749191894131594805ab82e8fc432cacc6d41bbb37262a98f745aa00fbf0. J'utilise IDEA lors du développement, bien sûr, vous pouvez également utiliser atom ou webstor. en utilisant IDEA, vous devez définir le langage et le framework dans les paramètres

Javascript

La version linguistique est JSX Harmony Sinon, l'éditeur peut signaler une erreur pour votre syntaxe correcte

Dans la balise d'en-tête du fichier html En citant les trois premiers fichiers ci-dessus, vous pouvez commencer le développement de réaction. Cependant, comme la requête ajax de jquery est plus pratique, j'ai cité jquery ici Bien sûr, vous. Vous pouvez également encapsuler vous-même une méthode de type ajax ou utiliser des requêtes http natives pour interagir avec l'arrière-plan.

<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>

Aujourd'hui, nous parlons principalement du problème de la définition du style de réaction :

<.>

Comme indiqué dans le code ci-dessus, je pense qu'il existe trois façons de définir le style :

<!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>

1 Comme indiqué dans la partie bleue de la police, écrivez directement le texte en ligne. style

2. Définissez une variable dans le code js, puis appelez la variable à l'intérieur de la balise element, comme indiqué dans la police rouge.

3. comme partie de la police verte

Une capture d'écran est jointe ci-dessous :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction aux méthodes de tableau en jaArticle suivant：Introduction aux méthodes de tableau en ja

Articles Liés

Voir plus