Javascript 如何将css变量添加到使用es6编写的reactJS组件中？

我的问题很简单，你注意到我这里有一个css变量，叫做frameStyle

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>
        );
    }
});

var Frame=React.createClass({
getInitialState:函数（）{
返回{hover:false}
},
切换悬停：函数（e）{
这是我的国家({
悬停：！this.state.hover
})
},
render:function（）{
if（this.state.hover）{
linkStyle=“蓝色”；
}否则{
linkStyle=“红色”；
}
var frameStyle={
宽度：100，
身高：100，
背景颜色：{this.props.linkStyle}
};
返回(
);
}
});

如果要使用ES6编写组件，我将如何添加类似的内容？如果有人能指出正确的方向，我会非常感激

如果我理解了您的问题，您希望使用react ja中的扩展类创建组件。
If I have understood your question you want to create component using extending class in react ja.


import React from ‘react’;
class Frame extends React.component{

    constructor(props){
       super(props);
       this.props = props;
       this.state = { hover: false}
    },

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

    render() {
        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>
        );
    }
}

从“React”导入React；
类框架扩展了React.component{
建造师（道具）{
超级（道具）；
this.props=props；
this.state={hover:false}
},
切换悬停=（e）=>{
这是我的国家({
悬停：！this.state.hover
})
},
render（）{
if（this.state.hover）{
linkStyle=“蓝色”；
}否则{
linkStyle=“红色”；
}
var frameStyle={
宽度：100，
身高：100，
背景颜色：{this.props.linkStyle}
};
返回(
);
}
}

是的，你是对的！我正在学习如何使用ReactJS编写，并希望学习如何在渲染组件中创建类似frameStyle变量的东西，但要使用ES6。