Reactjs - 인라인 스타일 올바르게 설정

Reactjs - 인라인 스타일 올바르게 설정

검도 스플리터와 함께 Reactjs를 사용하려고 합니다.스플리터에는 다음과 같은 스타일 속성이 있습니다.

style="height: 100%"

Reactjs에서는 올바르게 이해하면 인라인 스타일로 구현할 수 있습니다.

var style = {
  height: 100
}

다만, 저는 Dustin Getz jsxutil도 조금 더 분할하여 독립된HTML fragment를 가지기 위해 사용하고 있습니다.지금까지, 다음의 html fragment(splitter.html)를 가지고 있습니다.

<div id="splitter" className="k-content">
  <div id="vertical">
    <div>
      <p>Outer splitter : top pane (resizable and collapsible)</p>
    </div>
    <div id="middlePane">
      {height}
      <div id="horizontal" style={height}>
        <div>
          <p>Inner splitter :: left pane</p>
        </div>
        <div>
          <p>Inner splitter :: center pane</p>
        </div>
        <div>
          <p>Inner splitter :: right pane</p>
        </div>
      </div>
    </div>
  <div>
  <p>Outer splitter : bottom pane (non-resizable, non-collapsible)</p>
</div>

및 이 html을 참조하는 splitter.split 컴포넌트는 다음과 같습니다.

define(['react', 'external/react/js/jsxutil','text!internal/html/splitter.html'],
  function(React, jsxutil, splitterHtml) {
    'use strict';
    console.log('in app:' + splitterHtml);
    return React.createClass({

      render: function () {
        var scope = {
          height: 100
        };
        console.log('about to render:' + scope.height);

        var dom = jsxutil.exec(splitterHtml, scope);
        console.log('rendered:' + dom);
        return dom;
      }    
    });
  }
)

이제 이걸 실행할 때 콘텐츠로 하면 높이를 정확하게 볼 수 있어요.그러나 스타일 속성으로 실행되면 오류가 발생합니다.

The `style` prop expects a mapping from style properties to values, not a string. 

그래서 내가 제대로 지도를 못 그렸나 보군.

누군가 이것을 바로잡는 방법을 알려주시면 정말 감사하겠습니다.

설정을 시도해 볼 수도 있습니다.style다음과 같이 변수를 사용하지 않고 인라인으로 이동합니다.

style={{"height" : "100%"}}또는,

여러 Atribute의 경우:style={{"height" : "100%", "width" : "50%"}}

다음 작업을 수행해야 합니다.

var scope = {
     splitterStyle: {
         height: 100
     }
};

그런 다음 이 스타일을 필수 요소에 적용합니다.

<div id="horizontal" style={splitterStyle}>

---

코드에서는, 다음의 조작이 행해지고 있습니다(잘못되어 있습니다.

<div id="horizontal" style={height}>

어디에height = 100.

다음의 기능이 동작하지 않는 이유는, 이 메뉴얼에서는 명확하게 알 수 없습니다.

<span style={font-size: 1.7} class="glyphicon glyphicon-remove-sign"></span>

그러나 완전히 인라인으로 실행하는 경우:

• 이중 곱슬 괄호가 필요합니다.
• 값을 따옴표로 묶을 필요는 없습니다.
• 생략하면 React에 기본값이 추가됩니다."em"
• CSS에 대시가 있는 camelCase 스타일의 이름을 기억하십시오.예를 들어, 폰트 사이즈는 fontSize가 됩니다.
• class이className

올바른 방법은 다음과 같습니다.

<span style={{fontSize: 1.7 + "em"}} className="glyphicon glyphicon-remove-sign"></span>

보다 정확하고 명확한 방법은 다음과 같습니다.

<div style={{"font-size" : "10px", "height" : "100px", "width" : "100%"}}> 
    My inline Style
</div>

다음의 어프로치에 의해서, 보다 심플하게 할 수 있습니다.

// JS

const styleObject = {
      "font-size" : "10px",
      "height" : "100px",
      "width" : "100%"
}

// HTML

<div style={styleObject}> My inline Style </div>

인라인styleattribute는 오브젝트를 예상합니다.그래서 다음과 같이 쓰여 있다.{}, 그리고 그것은 두 배가 됩니다.{{}}디폴트 리액션 표준과 마찬가지로.

언급URL : https://stackoverflow.com/questions/21534899/reactjs-setting-inline-styles-correctly