react 怎麼設定 style屬性-前端問答-PHP中文網

react設定style屬性的方法：1、透過「
」方式設定行內樣式；2、透過「height: 'calc(100% - 15px)'」設定百分比；3、透過在樣式中使用函數「getWinHeight(200)」設定屬性即可。

react 怎麼設定 style屬性

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react 怎麼設定 style屬性？

React中設定樣式style

1.設定行內樣式：

1.基本設定：

使用{}，傳入一個物件{padding: '2px 0 5px 20px',overflowY: 'auto'}

如下：

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

登入後複製

2.設定百分比（相對資料）

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

登入後複製

3.透過函數設定：

例如，自己寫一個計算window高度的函數：

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

登入後複製

然後在樣式中使用：

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

登入後複製

2.雜七雜八：

1.table佔滿整行：

設定table標籤的style 為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>

登入後複製

2.父

設定高度不起作用：

如果父

設定高度不管用，那麼必須將子

的高度也設定一下，可以跟父< ;div>的高度保持一致,.

入下圖所示：父子

的高度都被設定為 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>

登入後複製

暫時寫這麼多，以後想到別的，再寫。

推薦學習：《react影片教學》

以上是react 怎麼設定 style屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：

react

來源：php.cn

上一篇：react null報錯怎麼辦下一篇：react怎麼將時間戳轉換成日期

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章