当前位置:首页 > 开发 > 行业应用 > 正文

React显示原生css style样式在dom对象里

发表于: 2016-05-23   作者:qiaolevip   来源:转载   浏览:
摘要: react设置style是需要一个object对象的vardivStyle={ color:'white', backgroundImage:'url('+imgUrl+')', WebkitTransition:'all',//notethecapital'W'here msTransition:'all'//'ms'istheonlylowercasevendorprefix };

react设置style是需要一个object对象的

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);

 

但有的时候,我们需要显示原生的style,比如接口里面返回的

"topOne": {
"title": "测试悬赏",
"style": "font-weight: bold;color: #3C9D40;background-color: #3300CC;",
"url": "http://xxx.com"
}

 

然后正确的姿势依旧是需要把string转为object对象

handleStyle(style) {
    let newStyle = {};
    if (style) {
      for (let v of style.split(';')) {
        let arr = v.split(':');
        newStyle[arr[0].replace(/-(.)/, function(w,v) { return v.toUpperCase(); })] = arr[1];
      }
    }
    return newStyle;
  }

<span className="notice" style={this.handleStyle(msg.style)}>{msg.title}</span>

 

React显示原生css style样式在dom对象里

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
安装react native依赖 本例在工程跟目录下创建了一个ReactComponent文件夹用来存放react native文件
有时候App需要访问平台API,但React Native可能还没有相应的模块包装;或者你需要复用一些Java代码
在BS的项目中,完成之后,都需要发布自己的网站。这个时候就要安装IIS了。 我也是最近才打算使用IIS
Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,
原生DOM知识的积累 现在各中大型公司都有一个中坚队伍为团队搭好架子,处理绝大多数的难题。但上天
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50519677 本文出自:【
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-T
先说下为啥要使用样式吧,举个例子来说吧 当要做这样的一个布局的时候 每个标签都要写的话,会感觉怎
1、style=OneNote 2、 style=Office2007Document
老是一个个指定控件的文字、颜色、背景等等属性非常麻烦,这时候运用Style可以让程序看起来非常简洁
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号