반응에서 스타일 속성을 설정하는 방법-프런트엔드 Q&A-php.cn

반응에서 스타일 속성을 설정하는 방법: 1. "
"를 통해 인라인 스타일을 설정합니다. 2. "를 사용합니다. height: 'calc(100% - 15px)'"를 사용하여 백분율을 설정합니다. 3. 스타일에서 "getWinHeight(200)" 함수를 사용하여 속성을 설정합니다.

반응에서 스타일 속성을 설정하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응에서 스타일 속성을 어떻게 설정하나요?

React에서 스타일 설정

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. 함수를 통해 설정합니다.

예를 들어, 창 높이를 직접 계산하는 함수를 작성합니다.

//参数 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. 테이블은 전체 행을 차지합니다:

테이블 태그의 스타일을 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. Parent

;높이 설정이 작동하지 않습니다.

부모

의 높이 설정이 작동하지 않으면 하위

의 높이도 설정해야 합니다. 이는 부모

의 키와 일치할 수 있습니다.

Enter 아래 그림과 같이 아버지와 아들

의 키는 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 비디오 튜토리얼"

위 내용은 반응에서 스타일 속성을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!