如何组合多个内联样式对象？
如何组合多个内联样式对象？
提问于 2015-05-01 07:13:31
在React中，您可以清楚地创建一个对象，并将其指定为内联样式。也就是说..。下面会提到。
var divStyle = {
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
var divStyle2 = {fontSize: '18px'};
React.render(<div style={divStyle}>Hello World!</div>, mountNode);如何组合多个对象并将它们分配在一起？
回答 17
Stack Overflow用户
发布于 2016-06-24 10:54:24
如果您正在使用React Native，则可以使用数组表示法：
<View style={[styles.base, styles.background]} />请查看我关于这方面的详细blog post。
Stack Overflow用户
发布于 2016-05-18 20:24:32
您可以使用展开运算符：
<button style={{...styles.panel.button,...styles.panel.backButton}}>Back</buttonStack Overflow用户
发布于 2015-12-05 03:33:25
您可以使用Object.assign()来实现这一点。
在您的示例中，您将执行以下操作：
ReactDOM.render(
<div style={Object.assign(divStyle, divStyle2)}>
Hello World!
</div>,
mountNode
);这将合并这两种样式。如果存在匹配的属性，则第二个样式将替换第一个样式。
正如Brandon所指出的，如果你想在没有应用Object.assign({}, divStyle, divStyle2)的情况下重用divStyle，你应该使用fontSize。
我喜欢用它来制作具有默认属性的组件。例如，下面是一个带有默认margin-right的小无状态组件
const DivWithDefaults = ({ style, children, ...otherProps }) =>
<div style={Object.assign({ marginRight: "1.5em" }, style)} {...otherProps}>
{children}
</div>;所以我们可以呈现类似这样的东西：
<DivWithDefaults>
Some text.
</DivWithDefaults>
<DivWithDefaults className="someClass" style={{ width: "50%" }}>
Some more text.
</DivWithDefaults>
<DivWithDefaults id="someID" style={{ marginRight: "10px", height: "20px" }}>
Even more text.
</DivWithDefaults>这将会给我们一个结果：
<div style="margin-right:1.5em;">Some text.</div>
<div style="margin-right:1.5em;width50%;" class="someClass">Some more text.</div>
<div style="margin-right:10px;height:20px;" id="someID">Even more text.</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29979324
复制相关文章
相似问题