react 怎麼設定 style屬性

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

本教學操作環境：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.父dc6dce4a544fdca2df29d5ac0ea9906b設定高度不起作用：

如果父dc6dce4a544fdca2df29d5ac0ea9906b設定高度不管用，那麼必須將子dc6dce4a544fdca2df29d5ac0ea9906b的高度也設定一下，可以跟父< ;div>的高度保持一致,.

入下圖所示：父子dc6dce4a544fdca2df29d5ac0ea9906b的高度都被設定為  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中文網其他相關文章！