JSX

Question

我正在尝试进行以下工作的内联样式

 <dt className='some-element' style={{backgroundColor : '#1a1a1a', fill: '#1a1a1a'}}>

现在我正在尝试每次更改十六进制值，所以尝试使用类似

的内容

let styleConfig = `backgroundColor : '${someColor}', fill: '${someColor}'`
<dt className='some-element' style={{styleConfig}}>

但是我没有看到样式被应用为第一个，也没有出现任何控制台错误。

有什么建议吗？

Answer 1

React组件的属性期望包含在字符串或大括号（对于其他值和变量）的引号中的值。

style={{backgroundColor : '#1a1a1a', fill: '#1a1a1a'}}中的第一对花括号是属性值包装器，第二对是您作为属性值传递的对象的一部分 - {backgroundColor : '#1a1a1a', fill: '#1a1a1a'}

由于ES6 shorthand property names，当你将变量styleConfig传递给两对大括号style={{styleConfig}}时，这就是你实际得到的：

style={{ styleConfig: `backgroundColor : '${someColor}', fill: '${someColor}'` }}

此外，styleConfig应该是一个对象，而不是字符串，因为style属性需要object of style properties。

试试这个：

let styleConfig = { backgroundColor : 'red', fill: 'blue' } // create an object of style properties 
<dt className='some-element' style={styleConfig}> // use a single pair of curly brackets