4

在我第一次实现 Radium 时，我正在尝试一个简单的“：悬停”。这是我所拥有的...

import React from 'react'
import Radium from 'radium'

@Radium
export default class ResSideNav extends React.Component {
  render() {
    const style = {
      navItem: {
        backgroundColor: '#2c80b8',

        ':hover': {
          backgroundColor: '#3A94CF'
        }
      }
    };

    return(
      // navItems defined elsewhere
      <div style={ style.navContainer }>
        {navItems.map((item, i) => <div key={ i } style={ style.navItem }>
                                    { item.name }</div>)}
      </div> 
    );
  }
};

我在服务器或控制台中没有收到任何错误，只是没有 :hover 状态事件。Webpack 没有给我任何错误，因为我已经设置了我的.babelrc和 Webpack 配置文件来读取装饰器语法。

需要明确的是，还有其他风格和元素在起作用，但这是一个修剪过的胖例子。谢谢。

4

1 回答 1

1

以防万一有人遇到这个...

我的问题是，即使在安装之后，babel 仍然没有读取 es6 中的装饰器运算符，babel-plugin-transform-decorators-legacy所以我只是：

class ResSidenav extends React.Component {
 // ...
export default Radium(ResSidenav);

不知道为什么这不起作用...

于 2017-02-08T22:29:55.710 回答