镭悬停不起作用答案

【问题标题】：Radium hover didn't work镭悬停不起作用
【发布时间】：2016-07-19 20:08:22
【问题描述】：

我正在使用 Radium 在 React 中编写内联 css，当我想使用“悬停”时出现以下错误：

未捕获的类型错误：无法读取 null 的属性“_currentElement”

我是不是做错了什么？

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

class Header extends React.Component {
    render() {
        var styles = {
            base: {
                backgroundColor: 'white',
                ':hover': {
                    backgroundColor: 'black'
                }
            },
            anchor: {
                color: 'black',
                ':hover': {
                    color: 'white',
                }
            }
        }

        return (
            <div>
                <div style={styles.base}>
                    <a style={styles.anchor}>Some text</a>
                </div>
            </div>
        );
    }
}

Header = Radium(Header);
export default Header;

事实上，如果我不使用 styles.anchor，它就可以工作。所以我不明白为什么它不适用于 styles.anchor。

另一个问题，当我尝试在 class Header extends React.Component 之前添加前缀 @Radium 时，出现编译错误。

谢谢！

【问题讨论】：

嗯，我能够通过在第二个 div jsfiddle.net/jwm6k66c/841 上添加一个 key 属性来让它工作，但我觉得我在我的应用程序中做了很多，但从来没有收到这样的警告
你是对的。我需要一把钥匙。非常感谢。
最后一个问题。如果我有三个风格相同的主播，我该怎么办？如果我把相同的钥匙放在他们身上，问题会再次发生。
使用不同的键

标签： javascript css reactjs inline

【解决方案1】：

如果您使用 babel，则必须安装 plugin-transform-decorators-legacy 才能使 @Radium 正常工作，但它目前已被弃用，我怀疑它很快就会回来，所以我会坚持包装您的组件 export default Radium(Header) .

【讨论】：