[英]Multiples styles in ReactJS inline style
在普通的html / css中,您可以使用兩個CSS類來做類似<div class="responsive-image placeholder">
操作。 如何使用JSX和內聯JS CSS將兩個或多個類放在一起?
一個解決方案可以是:
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>
);
}
});
使用https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign中的 es6。
<div style={Object.assign(stylea, styleb)}></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.