Comment définir l'attribut de style dans React-Questions et réponses frontales-php.cn

Comment définir l'attribut de style dans React : 1. Définissez le style en ligne via "
" 2. Utilisez "; height: 'calc(100% - 15px)'" pour définir le pourcentage ; 3. Définissez les propriétés en utilisant la fonction "getWinHeight(200)" dans le style.

Comment définir l'attribut de style dans React

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment définir l'attribut style dans React ?

Définir le style dans React

1. Définir le style en ligne :

1 Paramètres de base :

Utilisez {}, transmettez un objet {padding : '2px 0 5px 20px', overflowY : 'auto' }.

Comme indiqué ci-dessous :

<div style={{padding: &#39;2px 0 5px 20px&#39;,overflowY: &#39;auto&#39;}}

Copier après la connexion

2. Définissez le pourcentage (données relatives)

<div style={{width: &#39;calc(100% - 35px)&#39;,height: &#39;calc(100% - 15px)&#39;}}>

Copier après la connexion

3. Définissez-le via la fonction :

Par exemple, écrivez une fonction pour calculer vous-même la hauteur de la fenêtre :

//参数 adjustValue的作用是在window.innerHeight的基础上，减去多少高度，可以是负值，0，正值
function getWinHeight(adjustValue) {
    let winHeight;
    if (window.innerHeight) {
      winHeight = window.innerHeight;
    } else if ((document.body) && (document.body.clientHeight)) {
      winHeight = document.body.clientHeight;
    }
    return winHeight-adjustValue;
  }

Copier après la connexion

. utilisez-le dans le style :

<div style={{width: &#39;calc(100% - 35px)&#39;,height: getWinHeight(200)}}>
    <div id="jsoneditor" className="jsoneditor-react-container"  />
</div>

Copier après la connexion

2. Divers :

1. Le tableau occupe toute la ligne :

Définissez le style de la balise table sur style={{width: 'calc(100% - 10px)'. }}

<table style={{width: &#39;calc(100% - 10px)&#39;}}>
  <tr>
    <td style={{width:&#39;50px&#39;}}>
      <div style={{paddingTop:"10px",marginLeft:&#39;10px&#39;}}>
        <Button
          id="returnButtonId"
          text=""
          icon={"ic_arrow_back"}
          onClick={doBack}
        />
      </div>
    </td>
    <td>
      <div style={{paddingTop:&#39;10px&#39;}}>Edit Parameter Files</div>
    </td>
    <td>
      <div style={{float:&#39;right&#39;, margin:&#39;0 10px 0 10px&#39;, paddingTop:&#39;10px&#39;}}>
        <Button
            id="`uploadButtonId`"
            text="UPLOAD"
            icon={"ic_arrow_upward"}
            onClick={onUploadClicked}
        />
      </div>
    </td>
  </tr>
</table>

Copier après la connexion

2. Parent

Si le réglage de la hauteur du parent

qui peut être cohérent avec la taille du parent

Entrez Comme indiqué dans l'image ci-dessous : Les hauteurs du père et du fils

sont définies sur getWinHeight(180)

      <div style={{height: getWinHeight(180), border:&#39;2px&#39;}}>
          <SplitScreen
            id="parameterfiles-panel"
            left={
              <div style={{height: getWinHeight(180)}}>
              ..........
              </div>
            }
            right={
              <div style={{ whiteSpace: "nowrap"}}>
                  <div style={{padding: &#39;2px 0 5px 20px&#39;,overflowY: &#39;auto&#39;, width: &#39;calc(100% - 35px)&#39;,height: getWinHeight(180)}}>
                    <div id="jsoneditor" className="jsoneditor-react-container"  />
                  </div>
              </div>
            }
          />
        </div>

Copier après la connexion

J'écris ceci pour l'instant. , j'écrirai plus quand je penserai à autre chose.

Apprentissage recommandé : "Tutoriel vidéo React"

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!

Étiquettes associées：

react

Article précédent：Que faire si une erreur de réaction nulle est signalée Article suivant：Comment convertir l'horodatage en date en réaction

Déclaration de ce site Web

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

Derniers articles par auteur