Reactjs – 正确设置内联样式
我正在尝试与剑道分离器一起使用Reactjs。 分配器有一个像样式的属性
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>
和引用这个html的splitter.js组件如下
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.
所以我显然还没有把它正确地映射。
如果有人能帮我纠正这个问题，我会很感激。
你需要这样做：
var scope = { splitterStyle: { height: 100 } };
然后将这个样式应用到所需的元素：
<div id="horizontal" style={splitterStyle}>
在你的代码中你正在做这个（这是不正确的）：
<div id="horizontal" style={height}>
凡height = 100 。
您也可以尝试设置内联style而不使用variables，如下所示：
style={{"height" : "100%"}}或者，
对于多个属性： style={{"height" : "100%", "width" : "50%"}}
从文档中可以看出，为什么以下方法不起作用：
<span style={font-size: 1.7 + "em"} className"glyphicon glyphicon-remove-sign"=></span>
但是，当完全内联，你需要双大括号。 你不需要把你的值放在引号中，如果你省略"em"等等，react会添加一些默认值，并记住在CSS中有破折号的camelCase样式名 – 例如font-size变成fontSize：
<span style={{fontSize: 1.7 + "em"}} className"glyphicon glyphicon-remove-sign"=></span>
