我正在尝试使用带有剑道分离器的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。
height = 100