Reactjs - 正确设置内联样式

时间:2014-02-03 18:30:26

标签: javascript html reactjs

我正在尝试将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. 

所以我显然没有完全正确映射它。

如果有人能指导我纠正这个问题,我真的很感激。

4 个答案:

答案 0 :(得分:124)

您也可以尝试在不使用变量的情况下设置style内联,如下所示:

style={{"height" : "100%"}}或,

有多个属性:style={{"height" : "100%", "width" : "50%"}}

答案 1 :(得分:32)

你需要这样做:

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

然后将此样式应用于所需元素:

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

在您的代码中,您正在执行此操作(这是不正确的):

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

height = 100

答案 2 :(得分:10)

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>

答案 3 :(得分:1)

更正确,更清晰的方法是:

<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>

内联style属性需要对象。因此,它用{}编写,并且变成了{{}}的两倍,因为它是默认的反应标准。