Bagaimana untuk menetapkan atribut gaya dalam tindak balas-Soal Jawab bahagian hadapan-php.cn

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.

Bagaimana untuk menetapkan atribut gaya dalam tindak balas

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)

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

Salin selepas log masuk

3. Ditetapkan mengikut fungsi:

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

Salin selepas log masuk

Contohnya, tulis fungsi untuk mengira ketinggian tetingkap:

Kemudian gunakannya dalam gaya:

//参数 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

2. Pelbagai:

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

Salin selepas log masuk

1 Jadual mengambil keseluruhan baris:

Tetapkan gaya teg jadual kepada style={{width: '. calc(100% - 10px) '}}

2. Menetapkan ketinggian induk

tidak berfungsi:

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

Salin selepas log masuk

Jika tetapan ketinggian induk < div> tidak berfungsi, maka anak

mesti ditetapkan ketinggian ibu bapa

seperti yang ditunjukkan dalam rajah di bawah: ketinggian ibu bapa

ditetapkan 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: "

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

Salin selepas log masuk

tutorial video bertindak balas

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：

react

sumber：php.cn

Artikel sebelumnya：Apa yang perlu dilakukan jika ralat nol bertindak balas dilaporkan Artikel seterusnya：Cara menukar cap masa kepada tarikh dalam tindak balas

Kenyataan Laman Web ini

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

Artikel terbaru oleh pengarang