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

iteye_13003

于 2016-05-23 17:24:55 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签：乔乐共享众观千象每天进步一点点学习永无止境 React

本文链接：https://blog.youkuaiyun.com/iteye_13003/article/details/82652410

React 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了如何在React中处理和应用样式，特别是当样式作为字符串形式返回时如何将其转换为React可接受的对象形式。通过一个具体的例子展示了如何利用JavaScript进行样式字符串到对象的转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>