javascript - 如何将CSS变量添加到用es6编写的reactJS组件中？

我的问题真的很简单，您注意到我在这里有一个称为frameStyle的css变量。

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

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

最佳答案

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

关于javascript - 如何将CSS变量添加到用es6编写的reactJS组件中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46517633/