在样式块中添加两个变量Reactjs

Question

我想在Reactjs的样式块中放入两个变量。你如何去做这件事？

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。

Answer 2

样式道具期望具有键值对的单个对象。有关更多信息，请参阅docs。

如果你想将两者结合起来，然后用Object.assignmdn docs

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