[英]How do I dynamically add styles to a React style attribute?
I'm currently trying to use the React style attribute to style React components dynamically.我目前正在尝试使用 React 样式属性来动态设置 React 组件的样式。 The first styling condition using the attribute is working properly, however on the second condition I'm getting this error: "Parsing error: Unexpected token, expected "}"" Here is my code:使用该属性的第一个样式条件工作正常,但是在第二个条件下,我收到此错误:“解析错误:意外标记,预期为“}””这是我的代码:
<input
className="inputFieldComponent"
id={field.name}
type={field.type}
value={value}
disabled={(parentState.primaryVinRetrieved && field.name === 'makePrimary')
|| (parentState.primaryVinRetrieved && field.name === 'modelPrimary')
|| (parentState.secondaryVinRetrieved && field.name === 'makeSecondary')
|| (parentState.secondaryVinRetrieved && field.name === 'modelSecondary')}
placeholder={field.placeholder}
onChange={handleInputChange}
style={
field.currency && {
paddingLeft: '10px',
}
field.name === 'makePrimary' && {
color: 'grey',
}
}
/>
Basically I'm trying to chain additional conditionals into the style attribute.基本上我试图将额外的条件链接到样式属性中。 Not sure if this is the proper syntax for this.不确定这是否是正确的语法。 If there is a better way to accomplish this pls advise.如果有更好的方法来完成此操作,请提出建议。 Thanks.谢谢。
You can use the object spread operator - this works well with style objects composition:您可以使用对象扩展运算符- 这适用于样式对象组合:
style={{
...field.currency ? {
paddingLeft: '10px',
} : {},
...field.name === 'makePrimary' ? {
color: 'grey',
background: 'blue'
} : {}
}}
You can conditionally spread objects.您可以有条件地传播对象。
<input
className="inputFieldComponent"
id={field.name}
type={field.type}
value={value}
disabled={
(parentState.primaryVinRetrieved && field.name === 'makePrimary') ||
(parentState.primaryVinRetrieved && field.name === 'modelPrimary') ||
(parentState.secondaryVinRetrieved && field.name === 'makeSecondary') ||
(parentState.secondaryVinRetrieved && field.name === 'modelSecondary')
}
placeholder={field.placeholder}
onChange={handleInputChange}
style={{
...(field.currency
? {
paddingLeft: '10px',
}
: {}),
...(field.name === 'makePrimary'
? {
color: 'grey',
}
: {}),
}}
/>;
You can simply add new properties in styles object as styles is nothing, it just an object, so you can add new properties like this:您可以简单地在样式对象中添加新属性,因为样式什么都不是,它只是一个对象,因此您可以像这样添加新属性:
var data = {};变量数据 = {}; data["property"] = 4;数据[“属性”] = 4;
So, in your code, you can use your style operator as:因此,在您的代码中,您可以将样式运算符用作:
style = { styles }
where, styles is:其中,样式是:
let styles = {};
if(field.name === 'makePrimary') styles["color"] = 'grey';
if(field.currency) styles["paddingLeft"] = '10px';
Another approach is to use spread operator.另一种方法是使用扩展运算符。
You can use styled component as well as it help in passing parameter dynamically in css file.您可以使用样式组件以及它有助于在 css 文件中动态传递参数。 For more reference to this, follow the link given below: https://styled-components.com/如需更多参考,请点击以下链接: https : //styled-components.com/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.