【React】JSX内联cursor的url

前两天为了一个内联的cursor的url属性值想破了头…… （愁人.jpg）

在使用组件的时候，放在SCSS文件中有些属性总会无法渲染，只能使用内联样式，但是JSX的内联样式又稍有不同。(具体不同不在这里累述)

例如说我希望在某个

div

.div { cursor:url('yourimageUrl'),auto; }

按照JSX的套路估计也不难

<Component style={{cursor:'url(' + {imgUrl} + ',auto)'}} />

或者ES6的写法：

<Component style={cursor: `url(${imgUrl}),auto`}

结果都是不行，查了半天DOM元素啊相对路径啊都不对。最后琢磨出来的一个可行方法是：

首先将你要的将文件导入：

import curImg from './imgPath';

然后内联处写成：

<Component style={{cursor: 'url(' + {curImg} + '),auto'}} />

解题灵感来自StackOverflow的一个相关回答