" 2. Via "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."/> " 2. Via "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.">
Maison > Article > interface Web > Comment définir l'attribut de style dans React
Comment définir l'attribut de style dans React : 1. Définissez le style en ligne via "e3754c9bb53d3105ab9ea988454fc2bf" 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'}}
2. Définissez le pourcentage (données relatives)
<div style={{width: 'calc(100% - 35px)',height: 'calc(100% - 15px)'}}>
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; }
. utilisez-le dans le style :
<div style={{width: 'calc(100% - 35px)',height: getWinHeight(200)}}> <div id="jsoneditor" className="jsoneditor-react-container" /> </div>
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: '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>
2. Parent8c8b0f2d8524bd839e620d722e7e3d27 qui peut être cohérent avec la taille du parent dc6dce4a544fdca2df29d5ac0ea9906b.
Entrez Comme indiqué dans l'image ci-dessous : Les hauteurs du père et du filsdc6dce4a544fdca2df29d5ac0ea9906b 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>
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!