Question

在普通的html / css中，您可以使用两个CSS类来执行protected void onResume() { super.onResume(); maintop.setText(Common.mess1); }之类的操作。如何使用JSX和内联JS CSS将两个或多个类放在一起？

Answer 1

解决方案可以是：

<div class="responsive-image placeholder">

更简单的方法：

function join(){
    var res={};
    for (var i=0; i<arguments.length; ++i)
        if (arguments[i])
            Object.assign(res,arguments[i]);
    return res;
}

var myComponent = React.createClass({
    render: function(){
        return (
            <div style={join(styles.a,styles.b)}>
                My Content
            </div>
        );
    }
});

var styles = {
    b: {
        fontFamily: 'roboto',
        fontSize: 13,
        backgroundColor: '#edecec',
        overflow: 'auto'
    },
    a: {
        textDecoration: 'none',
        lineHeight: 1.4,
        color: '#5e5e5e',
    }
};

Answer 2

使用https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign中的es6。

<div style={Object.assign(stylea, styleb)}></div>

ReactJS内联样式的Multiples样式

2 个答案: