javascript - 我可以从 reactJS 中的渲染条件函数更改我的 css 样式属性吗？

Question

长话短说，我正在练习如何将 React 组件与事件监听器和处理程序一起使用。下面是我开发的代码:

var Frame = React.createClass({

    getInitialState: function() {
    return {hover: false}
    },

    toggleHover: function(e) {
        this.setState({
            hover: !this.state.hover
        })
    },

    render: function() {
        if (this.state.hover){
            linkStyle = "blue";
        }else{
            linkStyle = "red";
        }

        var frameStyle = {
            width: 100,
            height: 100,
            backgroundColor: {this.props.linkStyle}
        };

        return (
            <div onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} style={frameStyle}>
            </div>
        );
    }
});

我在这里要做的很简单。如果鼠标进入我的 div 组件，它会改变颜色。但我觉得我没有正确更改 CSS 属性。我假设如果我为 backgroundColor 创建一个属性并将其放在条件语句中，它将完美地工作。

Answer 1

悬停效果为什么要用JS事件监听？

CSS native 支持 hover 效果。 给你的 div 一个类，然后在 css 中添加以下代码:

.my-div {
  color: black;
}

.my-div:hover {
  color: red;
}

<div class="my-div">Text here</div>