Javascript Reactjs，我的脚本有点问题，但我不'；我不知道什么

我在react中工作，我有一个here图标，我需要将此图标设置为悬停状态，就像在css中一样，但我需要在react应用程序中执行此操作，以下是我的代码：

import React from 'react';
import ReactDOM from 'react-dom';

var FontIcon = React.createClass({

getInitialState: () => {
    return {
        hover: false,
    };
},

render(){

    var _props = this.props,
    iconStyle = {
        'font-size': _props.size,
        cursor: "default"
    }

    function hoverOn(){
        this.setState({
            hover: true
        });
    }

    function hoverOff(){
        this.setState({
            hover: false
        });
    }

    if (this.state.hover) {
        iconStyle.color = _props.hoverColor;
    } else {
        iconStyle.color = _props.color;
    }

    return(
            <i className="material-icons" style={iconStyle} onmouseenter={this.hoverOn} onmouseleave={this.hoverOff} >{_props.className}</i>
    );
}
});

ReactDOM.render(
    <FontIcon className="account_circle" size="100" color="blue" hoverColor="red" />,
    document.getElementById('app')
);

从“React”导入React；
从“react dom”导入react dom；
var FontIcon=React.createClass({
getInitialState:（）=>{
返回{
悬停：错，
};
},
render（）{
var_props=this.props，
iconStyle={
“字体大小”：u props.size，
光标：“默认值”
}
函数hoverOn（）{
这是我的国家({
悬停：对
});
}
函数hoverOff（）{
这是我的国家({
悬停：错误
});
}
if（this.state.hover）{
iconStyle.color=\u props.hoverColor；
}否则{
iconStyle.color=_props.color；
}
返回(
{{u props.className}
);
}
});
ReactDOM.render(
,
document.getElementById（'app'）
);

---

我也不知道怎么了：/谢谢你的帮助。

首先，不要在render（）中使用setState
之后，请注意React事件都是用CamelCase编写的，因为这只是javascript。试着这样做：

var FontIcon = React.createClass({

    getInitialState() {
        return {
            hover: false,
        };
    },
    hoverOff() {
        this.setState({
            hover: false
        });
    },
    hoverOn() {
        this.setState({
            hover: true
        });
    },
    render() {
        var _props = this.props;
        var iconStyle = {
            'font-size': _props.size,
            cursor: "default"
        };

        if (this.state.hover) {
            iconStyle.color = _props.hoverColor;
        } else {
            iconStyle.color = _props.color;
        }

        return(
            <i className="material-icons" 
               style={iconStyle} 
               onMouseEnter={this.hoverOn} 
               onMouseLeave={this.hoverOff} >
                {_props.className}
            </i>
        );
    }
});

var FontIcon=React.createClass({
getInitialState（）{
返回{
悬停：错，
};
},
霍弗夫{
这是我的国家({
悬停：错误
});
},
霍文（）{
这是我的国家({
悬停：对
});
},
render（）{
var_props=this.props；
变量iconStyle={
“字体大小”：u props.size，
光标：“默认值”
};
if（this.state.hover）{
iconStyle.color=\u props.hoverColor；
}否则{
iconStyle.color=_props.color；
}
返回(
{{u props.className}
);
}
});

---

不要在

render

中声明函数<代码>渲染函数经常调用，所以每次浏览器都会创建新函数并从内存中删除旧函数

您需要使用OnMouseCenter和onMouseLeave属性：

因此，结果代码：

import React from 'react';
import ReactDOM from 'react-dom';

var FontIcon = React.createClass({

getInitialState: () => {
    return {
        hover: false,
    };
},

hoverOn() {
   this.setState({
       hover: true
   });
},

hoverOff() {
   this.setState({
       hover: false
   });
},

render() {
    var _props = this.props,
    iconStyle = {
        'font-size': _props.size,
        cursor: "default"
    }

    if (this.state.hover) {
        iconStyle.color = _props.hoverColor;
    } else {
        iconStyle.color = _props.color;
    }

    return(
            <i className="material-icons" 
               style={iconStyle} 
               onMouseEnter={this.hoverOn} 
               onMouseLeave={this.hoverOff}>           
                    {_props.className}
            </i>
    );
}
});

ReactDOM.render(
    <FontIcon className="account_circle" size="100" color="blue" hoverColor="red" />,
    document.getElementById('app')
);

从“React”导入React；
从“react dom”导入react dom；
var FontIcon=React.createClass({
getInitialState:（）=>{
返回{
悬停：错，
};
},
霍文（）{
这是我的国家({
悬停：对
});
},
霍弗夫{
这是我的国家({
悬停：错误
});
},
render（）{
var_props=this.props，
iconStyle={
“字体大小”：u props.size，
光标：“默认值”
}
if（this.state.hover）{
iconStyle.color=\u props.hoverColor；
}否则{
iconStyle.color=_props.color；
}
返回(
{{u props.className}
);
}
});
ReactDOM.render(
,
document.getElementById（'app'）
);

不要在

render

中声明函数。它们应该与

render

@fabianshultz处于同一级别，但现在它给了我这样的错误：./app.js模块构建失败中的错误：SyntaxError:/my path/Unexpected token，应为，（12:1）10 |}11 |>12 |函数hoverOn（）{^13 | this.setState（{14 | hover:true 15 |}）；丢失前面的

函数

。是的，基本上它给了我一个错误，在第一个函数开始时，你不需要将它声明为

函数

。不需要在这里绑定…这不是es6类和“this”使用React时自动索引。createClass@TimurBilalov，谢谢你的回答，但它仍然不起作用SEB，谢谢你的解释。Karol，我发现了错误。你需要使用onMouseCenter和onMouseLeave，而不是onMouseCenter和onMouseLeave作为组件的属性。我现在看到了，谢谢你的解释。但是现在，屏幕上没有任何内容，只是编辑了我的代码…对不起，我的错，一切正常，非常感谢