[英]Reactjs - setting inline styles correctly
I am trying to use Reactjs with a kendo splitter.我正在尝试将 Reactjs 与剑道分离器一起使用。 The splitter has a style attribute like
拆分器具有样式属性,例如
style="height: 100%"
With Reactjs, if I have understood things correctly, this can be implemented using an inline style使用 Reactjs,如果我理解正确的话,这可以使用内联样式来实现
var style = {
height: 100
}
However, I am also using Dustin Getz jsxutil to in an attempt to split things a part a bit more and have independent html fragments.但是,我也在使用 Dustin Getz jsxutil来尝试将事物进一步拆分并拥有独立的 html 片段。 Thus far I have the following html fragment (splitter.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>
and a splitter.js component which references this html as follows和一个 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;
}
});
}
)
Now when I run this, I can see the height correctly if I put it as content.现在当我运行它时,如果我把它作为内容,我可以正确地看到高度。 However, when it executes as the style properties I am getting an error
但是,当它作为样式属性执行时,出现错误
The `style` prop expects a mapping from style properties to values, not a string.
So I obviously haven't quite got it mapped across correctly.所以我显然还没有完全正确地映射它。
I'd be really grateful if someone could give me a steer on correcting this.如果有人可以指导我纠正这个问题,我将不胜感激。
You could also try setting style
inline without using a variable, like so:您也可以尝试在不使用变量的情况下设置内联
style
,如下所示:
style={{"height" : "100%"}}
or, style={{"height" : "100%"}}
或者,
for multiple attributes: style={{"height" : "100%", "width" : "50%"}}
对于多个属性:
style={{"height" : "100%", "width" : "50%"}}
You need to do this:你需要这样做:
var scope = {
splitterStyle: {
height: 100
}
};
And then apply this styling to the required elements:然后将此样式应用于所需的元素:
<div id="horizontal" style={splitterStyle}>
In your code you are doing this (which is incorrect):在您的代码中,您正在执行此操作(这是不正确的):
<div id="horizontal" style={height}>
Where height = 100
.其中
height = 100
。
It's not immediately obvious from the documentation why the following does not work:从 文档中无法立即看出为什么以下内容不起作用:
<span style={font-size: 1.7} class="glyphicon glyphicon-remove-sign"></span>
But when doing it entirely inline:但是当完全内联时:
"em"
"em"
,React 会添加一些默认值class
is className
class
是类className
The correct way looks like this:正确的方法如下所示:
<span style={{fontSize: 1.7 + "em"}} className="glyphicon glyphicon-remove-sign"></span>
Correct and more clear way is :正确和更清晰的方法是:
<div style={{"font-size" : "10px", "height" : "100px", "width" : "100%"}}>
My inline Style
</div>
It is made more simple by following approach :通过以下方法使其更简单:
// JS // JS
const styleObject = {
"font-size" : "10px",
"height" : "100px",
"width" : "100%"
}
// HTML // HTML
<div style={styleObject}> My inline Style </div>
Inline style
attribute expects object.内联
style
属性需要对象。 Hence its written in {}
, and it becomes double {{}}
as one is for default react standards.因此它是用
{}
编写的,它变成了双{{}}
,因为它是用于默认反应标准的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.