reactjs - React svg xmlns：预期的 xlink 标识符

Question

使用 typescript、react 和 svgs 时如何修复标识符预期错误？

return (
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
                   xmlns:xlink="http://www.w3.org/1999/xlink" >
         <defs> ... </defs>
         <use ... xlink:href="#path-1"/>
    </svg>
);

标签： reactjstypescriptsvg

Answer 1

对每个属性使用特定于反应的拼写 (JSX)，例如：

return (
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
                   xmlnsXlink="http://www.w3.org/1999/xlink" >
         <defs> ... </defs>
         <use ... xlinkHref="#path-1"/>
    </svg>
);

• xmlnsXlink
• xlinkHref

另见：

• https://reactjs.org/blog/2016/04/07/react-v15.html