• 技术文章 >web前端 >前端问答

    react 怎么设置 style属性

    藏色散人藏色散人2023-01-19 14:49:20原创45

    react设置style属性的方法:1、通过“<div style={{padding: '2px 0 5px 20px',overflowY: 'auto'}}>”方式设置行内样式;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: '2px 0 5px 20px',overflowY: 'auto'}}

    2.设置百分比(相对数据)

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

    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: 'calc(100% - 35px)',height: getWinHeight(200)}}>
        <div id="jsoneditor" className="jsoneditor-react-container"  />
    </div>

    2.杂七杂八:

    1.table占满整行:

    设置table标签的style 为 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.父 <div>设置高度不起作用:

    如果父<div>设置高度不管用,那么必须将子<div>的高度也设置一下,可以跟父<div>的高度保持一致,.

    入下图所示:父子<div>的高度都被设置为 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>

    暂时写这么多,以后想到别的,再写。

    推荐学习:《react视频教程

    以上就是react 怎么设置 style属性的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:react null报错怎么办 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react安装依赖命令有哪些• react怎么实现图片选择• react 怎么安装依赖• react null报错怎么办
    1/1

    PHP中文网