React.js-正确设置内联样式

  • Z时代
  • 2024-01-10
  • 分类：问答

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

style="height: 100%"

使用Reactjs，如果我正确理解了所有内容，则可以使用内联样式来实现

var style = {
  height: 100
}

但是，我也使用Dustin Getz jsxutil尝试将内容拆分成更多部分并具有独立的html片段。到目前为止，我有以下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.

所以我显然还没有完全正确地映射它。

如果有人可以指导我纠正此问题，我将非常感激。

回答：

您需要这样做：

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

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

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

在您的代码中您正在执行此操作（这是不正确的）：

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

在哪里height = 100。

以上是 React.js-正确设置内联样式 的全部内容， 来源链接： utcz.com/qa/426756.html

回到顶部