Реагируйте svg xmlns: ожидается идентификатор xlink

Question

Как исправить ошибку ожидаемого идентификатора при использовании машинописи, реакции и 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>
);

Answer 1

Вы также можете использовать зависимость svg-inline-реагировать и передавать исходный SVG в виде строки.И вам не нужно беспокоиться о переводе HTML в синтаксис JSX.

    import InlineSVG from 'svg-inline-react';

    const svgSource = `<svg xmlns="......</svg>`;
    <InlineSVG src={svgSource} />

Answer 2

Используйте специфическое для реакции написание (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