React Style不适用于模板字符串

Question

为什么这个inline style不起作用？ 我的控制台记录：The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.是因为模板文字将所有内容都转换为字符串吗？

Answer 1

style道具接受一个对象，因此您需要{ right: 0 }或{ left: 0 }。您可以使用computed property name而不是模板字符串来解决此问题：

const randomLeftOrRight = { [returnRandom()]: 0 };

Answer 2

如果您使用的是模板字符串，则可以这样使用

style={{ right: `${triggerNode.right+ 50}px`, left: `${triggerNode.left}px` }}

Answer 3

const randomLeftOrRight = { [returnRandom()] : 0 };