Javascript Reactjs-正确设置内联样式

我正在尝试使用带有剑道拆分器的Reactjs。拆分器有一个样式属性，如

style="height: 100%"

对于Reactjs，如果我理解正确，可以使用内联样式实现

var style = {
  height: 100
}

然而，我也在使用Dustin Getz来尝试将事情进一步分割，并拥有独立的html片段。到目前为止，我有以下html片段（splitter.html）

现在，当我运行它时，如果我将其作为内容，我可以正确地看到高度。但是，当它作为样式属性执行时，我得到了一个错误

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

所以我显然没有正确地把它映射过来

如果有人能帮我纠正这个问题，我将非常感激

您需要这样做：

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

然后将此样式应用于所需的元素：

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

---

在您的代码中，您正在这样做（这是不正确的）：

---

如果

height=100

您也可以尝试在不使用变量的情况下设置

样式

内联，如下所示：

style={{“height”：“100%”}

---

对于多个属性：

style={{“height”：“100%”，“width”：“50%”}

从下面的原因来看，这并不明显：

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

---

正确且更清晰的方法是：

<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>

//JS
常量styleObject={
“字体大小”：“10px”，
“高度”：“100px”，
“宽度”：“100%”
}
//HTML
我的内联风格

---

内联

style

属性需要对象。因此，它是用

{}

编写的，并且它变成了双重

{{}

，就像默认的react标准一样

对我来说，这听起来像是jsxutil的一个问题。对于不基于百分比的事情，有没有办法解决这个问题？例如：

WebkitAnimationIterationCount

？

style={{{“高度”：“30px”，“宽度”：“30px”}}

您可以编写任何css值。它并不局限于百分比值。@MohamedElMahallawy文档声明数字会自动转换为px，但我来这里是想知道如何设置百分比——多亏了myuuf，这非常有用。这里的文档：乐意为@MichaelStoner:）提供虚线属性的帮助，如

font-size

use-camelcase

style={{{“fontSize”：“30px”}

。

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

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

<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>