在樣式塊中添加兩個變量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> 
}