我正在尝试将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.
所以我显然没有完全正确映射它。
如果有人能指导我纠正这个问题,我真的很感激。
答案 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"
,class
是className
正确的方法如下:
<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
属性需要对象。因此,它用{}
编写,并且变成了{{}}
的两倍,因为它是默认的反应标准。