ReactJS内联样式中的倍数样式

Question

在普通的html / css中，您可以使用两个CSS类来做类似<div class="responsive-image placeholder">操作。 如何使用JSX和内联JS CSS将两个或多个类放在一起？

Answer 1

一个解决方案可以是：

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',
    }
};

一个更简单的方法：

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

Answer 2

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

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