Reactjs - 正确设置内联样式 [英] Reactjs - setting inline styles correctly

问题描述

我试图用剑道分割器来使用Reactjs。 splitter有一个style属性，比如

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

style="height: 100%"

使用Reactjs，如果我已经正确理解了事情，可以使用内联样式实现

With Reactjs, if I have understood things correctly, this can be implemented using an inline style

var style = {
  height: 100
}

但是，我也在使用Dustin Getz jsxutil 来尝试将事物分割成更多部分并且拥有独立的html片段。到目前为止，我有以下html片段（splitter.html）

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>

和a splitter.js组件引用这个HTML如下

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.

推荐答案

您需要执行此操作：

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

其中 height = 100 。

这篇关于Reactjs - 正确设置内联样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！