Reactjs - 正确设置内联样式

Question

我正在尝试使用Reactjs与kendo分割器。分割器具有类似于style属性的属性。

style="height: 100%"

使用Reactjs，如果我理解正确的话，可以使用内联样式来实现。

var style = {
  height: 100
}

然而，我也在尝试使用 Dustin Getz 的 jsxutil 来将事物分开，使其更具独立性。到目前为止，我拥有以下的 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. 

所以显然我还没有正确地理解它。

如果有人能指导我如何纠正这个问题，我将非常感激。

- Simon Woods

---

这对我来说听起来像是jsxutil的问题。 - Sophie Alpert

Answer 1

您也可以尝试直接设置style属性而不使用变量，例如：

style={{"height" : "100%"}} 或者，

对于多个属性：style={{"height" : "100%", "width" : "50%"}}

- myusuf

---

有没有办法规避那些不是基于百分比的情况？例如：WebkitAnimationIterationCount？ - Mohamed El Mahallawy

style={{"height" : "30px", "width" : "30px"}} 你可以写任何CSS值，不仅限于百分比值。 - myusuf

@MohamedElMahallawy，文档指出数字会自动转换为px，但我来这里是想找到如何设置百分比 - 所以感谢myuuf的帮助。文档在此处：https://facebook.github.io/react/tips/style-props-value-px.html - MichaelStoner

很高兴能帮助@MichaelStoner :) - myusuf

对于类似 font-size 的 dashed 属性，请使用驼峰式命名法 style={{"fontSize" : "30px"}}。 - rnrneverdies

Answer 2

你需要做这个：

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

然后将这个样式应用到所需的元素：

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

在你的代码中，你正在做这件事（这是不正确的）：

---

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

当 height = 100 时。

- Gohn67

Answer 3

从文档中并不立即清楚以下内容为什么无法工作：

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

但是当完全内联时：

• 您需要双花括号
• 您不需要将值放在引号中
• 如果省略"em"，React会添加一些默认值
• 记得使用驼峰式命名法来命名CSS中带有破折号的样式名称 - 例如，font-size变成了fontSize：
• class是className

正确的方式如下所示：

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

- user1641172

Answer 4

正确且更清晰的方式是：

正确且更清晰的方式是：

<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属性期望一个对象。因此，它被写成{}，并且变成了双重的{{}}，其中一个是默认的React标准。

- Sangwin Gawande