问

Reactjs - 正确设置内联样式

我只是个p兑发布于 2023-01-29 16:36

react

我正在尝试将Reactjs与kendo分离器一起使用.分割器有一个样式属性

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

var style = {
  height: 100
}

但是,我也在使用Dustin Getz jsxutil来尝试将事情分成更多部分并拥有独立的html片段.到目前为止,我有以下html片段(splitter.html)


  
    
      Outer splitter : top pane (resizable and collapsible)
    
    
      {height}
      
        
          Inner splitter :: left pane
        
        
          Inner splitter :: center pane
        
        
          Inner splitter :: right pane
        
      
    
  
  Outer splitter : bottom pane (non-resizable, non-collapsible)

和一个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.

所以我显然没有完全正确映射它.

如果有人能指导我纠正这个问题,我真的很感激.

3 个回答

从文档中可以看出为什么以下不起作用:
```
<span glyphicon glyphicon-remove-sign"></span>
```
但是当它完全内联时:

你需要双花括号

您不需要将值放在引号中

如果省略,React将添加一些默认值 "em"

记住在CSS中有破折号的camelCase样式名称 - 例如font-size变为fontSize:

class 是 className

正确的方式如下:
```
<span em"}} className="glyphicon glyphicon-remove-sign"></span>
```
2023-01-29 16:38 回答

G小麥NO1_238
您也可以尝试在style不使用变量的情况下设置内联,如下所示:

height" : "100%"}} 要么,

对于多个属性: height" : "100%", "width" : "50%"}}

2023-01-29 16:39 回答

幸运幸福摩天轮的世界
你需要这样做:
```
var scope = {
     splitterStyle: {
         height: 100
     }
};
```
然后将此样式应用于所需的元素:
```
<div id="horizontal" style={splitterStyle}>
```
在您的代码中,您正在执行此操作(这是不正确的):
```
<div id="horizontal" style={height}>
```
哪里height = 100.
2023-01-29 16:39 回答

大瑞Y

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签