在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);
如何组合多个对象并将它们分配在一起?
发布于 2016-06-24 10:54:24
如果您正在使用React Native,则可以使用数组表示法:
<View style={[styles.base, styles.background]} />
请查看我关于这方面的详细blog post。
发布于 2016-05-18 20:24:32
您可以使用展开运算符:
<button style={{...styles.panel.button,...styles.panel.backButton}}>Back</button
发布于 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>
https://stackoverflow.com/questions/29979324
复制相似问题