我正在创建将呈现各种SVG的React组件:
const Close = ({ fill,width,height,float,}) => ( <svg width={ `${width}px` } height={ `${height}px` } viewBox="0 0 14.48 14.48" style={ { float: `${float}`,cursor: 'pointer' } }> <title>x</title> <g id="Layer_2" data-name="Layer 2"> <g id="Background"> <line style={ { fill: 'none',stroke: `${fill}`,strokeMiterlimit: 10 } } x1="14.13" y1="0.35" x2="0.35" y2="14.13" /> <line style={ { fill: 'none',strokeMiterlimit: 10 } } x1="14.13" y1="14.13" x2="0.35" y2="0.35" /> </g> </g> </svg> );
能够提供各种属于该组件的尺寸,颜色等,非常方便…
然而,我没有一个好的解决方案是以干燥的方式处理样式.请注意,线条元素具有相同的样式值.我现在把它们写成内联,因为如果我添加了一个嵌入式样式表,那么我会在页面的其他地方呈现其他SVG的类名冲突(我们的SVG软件反复使用相同的类).
< style scoped>已从规范中删除:https://github.com/whatwg/html/issues/552
Edge:https://caniuse.com/#feat=shadowdomv1尚不支持Shadow DOM
范围风格还有其他选择吗?
解决方法
如果您只想干掉代码,可以创建一个样式对象并重用它:
const Close = ({ fill,}) => { const style = { fill: 'none',strokeMiterlimit: 10 } return ( <svg width={ `${width}px` } height={ `${height}px` } viewBox="0 0 14.48 14.48" style={ { float: `${float}`,cursor: 'pointer' } }> <title>x</title> <g id="Layer_2" data-name="Layer 2"> <g id="Background"> <line style={ style } x1="14.13" y1="0.35" x2="0.35" y2="14.13" /> <line style={ style } x1="14.13" y1="14.13" x2="0.35" y2="0.35" /> </g> </g> </svg> ); }
这也将导致小的性能改进,因为在每个渲染周期中将创建更少的对象.