Reactjs - setting inline styles correctly

Question

I am trying to use Reactjs with a kendo separator. A splitter has a style attribute like

style="height: 100%" 

If I correctly understood everything in Reactjs, this can be implemented using the inline style

 var style = { height: 100 } 

However, I also use Dustin Getz jsxutil to try to split the parts into parts and get independent HTML snippets. At the moment, I have the following HTML snippet (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 the 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 is executed as style properties, I get an error

 The 'style' prop expects a mapping from style properties to values, not a string. 

So I obviously didn’t quite match it.

I would really appreciate if anyone could help me fix this.

Answer 1

You need to do this:

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

And then apply this style to the required elements:

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

---

In code, you do this (which is wrong):

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

Where height = 100 .

Answer 2

You can also try setting style inline without using a variable, for example:

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

for multiple attributes: style={{"height" : "100%", "width" : "50%"}}

Answer 3

It’s not immediately clear from the documentation why the following does not work:

 <span style={font-size: 1.7} class="glyphicon glyphicon-remove-sign"></span> 

But it is fully integrated:

• You need double curly braces
• You do not need to specify your values ​​in quotation marks.
• React will add some default values ​​if you omit "em"
• Don't forget camelCase style names that have traits in CSS — for example, the font size becomes fontSize:
• class is className

The correct path is as follows:

 <span style={{fontSize: 1.7 + "em"}} className="glyphicon glyphicon-remove-sign"></span> 

Answer 4

The correct and more understandable way:

 <div style={{"font-size" : "10px", "height" : "100px", "width" : "100%"}}> My inline Style </div> 

This is simplified by the following approach:

 // JS const styleObject = { "font-size" : "10px", "height" : "100px", "width" : "100%" } // HTML <div style={styleObject}> My inline Style </div> 

The built-in style attribute expects an object. Therefore, it is written in {} , and it becomes double {{}} , since it is the default reaction standard.