javascript - Reactjs-正確設置內聯樣式



html (2)

我正在嘗試將Reactjs與kendo分離器一起使用。 分割器有一個樣式屬性

style="height: 100%"

使用Reactjs,如果我理解正確,可以使用內聯樣式實現

var style = {
  height: 100
}

但是,我也在使用Dustin Getz jsxutil來嘗試將事情分成更多部分並擁有獨立的html片段。 到目前為止,我有以下html片段(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>

和一個splitter.js組件,它引用這個html如下

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. 

所以我顯然沒有完全正確地映射它。

如果有人能指導我糾正這個問題,我將非常感激。

https://src-bin.com


Answer #1

你需要這樣做:

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

然後將此樣式應用於所需的元素:

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

在您的代碼中,您正在執行此操作(這是不正確的):

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

height = 100


Answer #2

documentation直接看出以下內容不起作用:

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

但是當它完全內聯時:

  • 你需要雙花括號
  • 您不需要將值放在引號中
  • 如果省略"em" React會添加一些默認值
  • 記住在CSS中有破折號的camelCase樣式名稱 - 例如font-size變為fontSize:
  • classclassName

正確的方式如下:

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




reactjs