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.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: '2px 0 5px 20px',overflowY: 'auto'}}Copier après la connexion2. Définissez le pourcentage (données relatives)
<div style={{width: 'calc(100% - 35px)',height: 'calc(100% - 15px)'}}>Copier après la connexion3. 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: 'calc(100% - 35px)',height: getWinHeight(200)}}> <div id="jsoneditor" className="jsoneditor-react-container" /> </div>Copier après la connexion2. 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: 'calc(100% - 10px)'}}> <tr> <td style={{width:'50px'}}> <div style={{paddingTop:"10px",marginLeft:'10px'}}> <Button id="returnButtonId" text="" icon={"ic_arrow_back"} onClick={doBack} /> </div> </td> <td> <div style={{paddingTop:'10px'}}>Edit Parameter Files</div> </td> <td> <div style={{float:'right', margin:'0 10px 0 10px', paddingTop:'10px'}}> <Button id="`uploadButtonId`" text="UPLOAD" icon={"ic_arrow_upward"} onClick={onUploadClicked} /> </div> </td> </tr> </table>Copier après la connexion2. 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:'2px'}}> <SplitScreen id="parameterfiles-panel" left={ <div style={{height: getWinHeight(180)}}> .......... </div> } right={ <div style={{ whiteSpace: "nowrap"}}> <div style={{padding: '2px 0 5px 20px',overflowY: 'auto', width: 'calc(100% - 35px)',height: getWinHeight(180)}}> <div id="jsoneditor" className="jsoneditor-react-container" /> </div> </div> } /> </div>Copier après la connexionJ'é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:source:php.cnArticle 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éactionDéclaration de ce site WebLe 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.cnDerniers articles par auteur
2023-04-24 11:00:01 2023-04-24 10:55:51 2023-04-24 10:52:44 2023-04-23 17:40:51 2023-04-23 17:38:02 2023-04-23 17:34:02 2023-04-23 10:15:45 2023-04-23 10:10:52 2023-04-21 16:01:59 2023-04-21 15:58:01Derniers numérosRubriques connexesPlus>
- Raisons du trafic excessif sur les serveurs de sites Web à l'étranger
- Tutoriel sur la structure des données et l'algorithme
- La signification de où dans SQL
- Domaines d'application du DSP
- Quelles sont les méthodes pour se connecter au serveur vps
- Quelle est la fonction du Huawei NFC ?
- Windows vérifie l'état d'occupation des ports
- Microsoft Visual C++ peut-il être désinstallé ?