javascript - 在 Reactjs 样式 block 中添加两个变量

Question

我试图将两个变量放入 Reactjs 的样式 block 中。你打算如何做到这一点？

var GlobalStyles = require(./jsStyles/GlobalStyles.js);
var moduleSpecificStyles = {
    hide:{
        'display':'none'
    },
    //more styles
};

...

render:function(){
    return (
        ...
        <div style={GlobalStyles.container, moduleSpecificStyles.hide}></div>
    )
}

这似乎不起作用。如果我只有一个，它就可以在任何一个上工作。但是添加两者，我不知道如何让它工作。

Answer 1

你需要将样式对象组合在一起，如果你使用的是ES2015那么你可以使用Object.prototype.assign功能。

<div style={Object.assign({}, GlobalStyles.container, moduleSpecificStyles.hide)}></div>

无论您的 GlobalStyles.container 是否对象有一个 display: block属性值与否，组合样式对象将具有 display: none .