Cara untuk menetapkan atribut gaya dalam tindak balas: 1. Tetapkan gaya sebaris melalui "
"; 2. Tetapkan peratusan melalui "height: 'calc(100% - 15px)'" 3. Tetapkan sifat dengan menggunakan fungsi "getWinHeight(200)" dalam gaya.
Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.
Bagaimana untuk menetapkan atribut gaya sebagai tindak balas?
Tetapkan gaya dalam React
1. Tetapkan gaya sebaris:
1. }, masukkan objek {padding: '2px 0 5px 20px',overflowY: 'auto'}
seperti ditunjukkan di bawah:
2. Tetapkan peratusan (data relatif)3. Ditetapkan mengikut fungsi:<div style={{padding: '2px 0 5px 20px',overflowY: 'auto'}}Salin selepas log masuk<div style={{width: 'calc(100% - 35px)',height: 'calc(100% - 15px)'}}>Salin selepas log masukContohnya, tulis fungsi untuk mengira ketinggian tetingkap:
Kemudian gunakannya dalam gaya:2. Pelbagai://参数 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; }Salin selepas log masuk<div style={{width: 'calc(100% - 35px)',height: getWinHeight(200)}}> <div id="jsoneditor" className="jsoneditor-react-container" /> </div>Salin selepas log masuk1 Jadual mengambil keseluruhan baris:
Tetapkan gaya teg jadual kepada style={{width: '. calc(100% - 10px) '}}
2. Menetapkan ketinggian induktidak berfungsi:<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>Salin selepas log masukJika tetapan ketinggian induk < div> tidak berfungsi, maka anak
mesti ditetapkan ketinggian ibu bapaseperti yang ditunjukkan dalam rajah di bawah: ketinggian ibu bapaditetapkan kepada getWinHeight(180)Saya akan menulis sebanyak ini buat masa ini dan saya akan menulis lebih banyak apabila saya memikirkan sesuatu lain. Pembelajaran yang disyorkan: "tutorial video bertindak balas<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>Salin selepas log masuk"
Atas ialah kandungan terperinci Bagaimana untuk menetapkan atribut gaya dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Label berkaitan:Artikel sebelumnya:Apa yang perlu dilakukan jika ralat nol bertindak balas dilaporkan Artikel seterusnya:Cara menukar cap masa kepada tarikh dalam tindak balasKenyataan Laman Web iniKandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cnArtikel terbaru oleh pengarang
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:01Isu terkinijavascript - React memanggil komponen tanpa kewarganegaraan React tidak ditakrifkandaripada 1970-01-01 08:00:00000Mencipta projek React menggunakan klon create-react-app: panduan langkah demi langkahdaripada 1970-01-01 08:00:00000Apabila menggunakan 'React' dalam JSX, ia mesti disertakan dalam skop react/react-in-jsx-scopedaripada 1970-01-01 08:00:00000amaran react-native dalam alat nyahpepijat chrome dan tidak boleh menggunakan react dev-toolsdaripada 1970-01-01 08:00:00000`npx create-react-app` tidak boleh digunakan secara langsung semasa membuat projek Reactdaripada 1970-01-01 08:00:00000Cadangan popularTutorial PopularLagi>
![]()
![]()
Tutorial Video Permulaan JAVA2619890![]()
Muat turun terkiniLagi>