React svg xmlns: ожидается идентификатор xlink

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

reactjs typescript svg

18.12.2018 21:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

14 253

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

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

Что ж, вы просто должны понимать, что JSX - это не HTML, хотя они похожи.

— 18.12.2018 21:46

То же самое относится и к другим атрибутам с дефисами, которые обычно встречаются в SVG, например строка-обводка >> обводка См. Документацию по React: reactjs.org/docs/…

— 15.07.2020 18:41

18.12.2018 21:38

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

    import InlineSVG from 'svg-inline-react';

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

23.05.2019 21:28

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


import convert from 'convert-svg-react'
 
function App(props) {
    
    const svg = convert(`<svg width = "1em" height = "1em" viewBox = "0 0 16 16" class = "bi bi-caret-right-square-fill" fill = "currentColor" xmlns = "http://www.w3.org/2000/svg">
    <path fill-rule = "evenodd" d = "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5 0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"/>
    </svg>`);
 
    return (
        <>      
            {/* Will display your converted code for copying as well as your svg */}
            {svg}
        </>
    );
}
 
ReactDOM.render(
    <App />,
    document.getElementById('app')
);

05.12.2020 16:51

Другие вопросы по теме

Объявление поля данных vue-property-decorator vuejs

Доступ к универсальному массиву через свойства типа

Angular 5 Datepicker (ngx-bootstrap) не отображается

Замените один элемент в массиве объектов модели Angular другим объектом с помощью Angular2

Машинопись ENUM поиск по значению

Клиент apollo: машинописный текст codegen с полями запроса @client

Как я могу получить доступ к переменной класса Angular без использования this?

Функция обратного вызова D3 `this` затеняет объект` this`

Почему API-интерфейсы Grid и Column могут быть неопределенными или нулевыми во время события gridReady?

<React.Fragment> с ts (2605) в VScode с включенными checkJs

React svg xmlns: ожидается идентификатор xlink

Ответы 3

Другие вопросы по теме

Похожие вопросы