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/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign 的 es6。

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

ReactJS 内联样式中的多个样式

Multiples styles in ReactJS inline style

javascript

reactjs

react-jsx