Résumez l'exemple de didacticiel de définition du style CSS dans ReactJs-js tutoriel-php.cn

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

零下一度

Libérer： 2017-06-17 17:25:42

original

1110 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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!