I am trying to use Reactjs with a kendo splitter. 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
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. Thus far I have the following html fragment (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
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.
This question is related to
javascript
html
reactjs
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
const styleObject = {
"font-size" : "10px",
"height" : "100px",
"width" : "100%"
}
// HTML
<div style={styleObject}> My inline Style </div>
Inline style
attribute expects object. Hence its written in {}
, and it becomes double {{}}
as one is for default react standards.
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"
class
is className
The correct way looks like this:
<span style={{fontSize: 1.7 + "em"}} className="glyphicon glyphicon-remove-sign"></span>
You could also try setting style
inline without using a variable, like so:
style={{"height" : "100%"}}
or,
for multiple attributes: style={{"height" : "100%", "width" : "50%"}}
Source: Stackoverflow.com