Reactjs - 正确设置内联样式

Posted

技术标签:

【中文标题】Reactjs - 正确设置内联样式【英文标题】:Reactjs - setting inline styles correctly 【发布时间】:2014-02-27 09:13:13 【问题描述】:

我正在尝试将 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. 

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

如果有人能指导我纠正这个问题,我将不胜感激。

【问题讨论】:

这听起来像是 jsxutil 的问题。 【参考方案1】:

正确且更清晰的方法是:

<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 属性需要对象。因此它是用 写的,它变成了双重,因为一个是默认的反应标准。

【讨论】:

【参考方案2】:

从documentation 无法立即看出为什么以下内容不起作用:

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

但是当完全内联时:

你需要双花括号 您无需将值放在引号中 如果你省略"em",React 将添加一些默认值 记住在 CSS 中带有破折号的驼峰式样式名称 - 例如font-size 变成 fontSize: classclassName

正确的方式是这样的:

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

【讨论】:

【参考方案3】:

你需要这样做:

var scope = 
     splitterStyle: 
         height: 100
     
;

然后将此样式应用于所需的元素:

<div id="horizontal" style=splitterStyle>

在您的代码中,您正在这样做(这是不正确的):

<div id="horizontal" style=height>

height = 100.

【讨论】:

【参考方案4】:

您也可以尝试在不使用变量的情况下设置style inline,如下所示:

style="height" : "100%" 或,

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

【讨论】:

对于不是基于百分比的事情,有没有办法解决这个问题?例如:WebkitAnimationIterationCount? style="height" : "30px", "width" : "30px" 你可以写任何css值。它不限于百分比值。 @MohamedElMahallawy 文档指出数字会自动转换为 px,但我来到这里试图找到如何设置百分比 - 非常感谢 myuuf,非常有帮助。这里的文档:facebook.github.io/react/tips/style-props-value-px.html 乐于帮助@MichaelStoner :) 对于像font-size这样的虚线属性,使用驼峰式style="fontSize" : "30px"

以上是关于Reactjs - 正确设置内联样式的主要内容,如果未能解决你的问题,请参考以下文章

使用 ReactJS 生成内联字体大小样式

具有内联样式的关键帧 ReactJS

使用 ReactJS 的跨浏览器 flexbox 内联样式

如何在 reactjs 中使用伪元素作为内联样式? [复制]

如何将供应商前缀应用于 reactjs 中的内联样式?

ReactJS 选择所有相似的标签进行样式设置