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.assign mdn docs

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

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

2 个答案: