Html-react-parser: Ошибка: img является тегом пустого элемента и не должен иметь ни дочерних элементов, ни использования dangerousSetInnerHTML.

Созданный на 26 авг. 2016 · 14Комментарии · Источник: remarkablemark/html-react-parser

Привет!

Отличный плагин, я действительно думаю, что это будет полезно для того, над чем я работаю.

Я заметил, что анализ любого img -элемента вызывает указанную выше ошибку. Это также может относиться к любому элементу, у которого никогда не должно быть дочерних элементов.

Временный обходной путь - использовать что-то вроде этого:

const parserConfig = {
    replace: domNode => {
        if(domNode.type === DOM_TYPE_TAG && domNode.name === 'img') {
            return <img src={domNode.attribs.src} alt={domNode.attribs.alt} className={domNode.attribs.class} />;
        }
    }
};

bug

Источник

poacher2k

Самый полезный комментарий

Я столкнулся с этой проблемой, потому что пытался добавить детей в тег img ...

Sshetty2 28 мая 2019

👍2 😕1

Все 14 Комментарий

Спасибо, что дал мне знать. У вас есть пример, чтобы я мог воспроизвести эту ошибку?

remarkablemark 26 авг. 2016

Привет!
Вы можете воспроизвести это следующим образом:
ReactDOM.render(Parser('<div><img src="" alt=""/></div>'), document.getElementById('root'));

poacher2k 29 авг. 2016

Отлично, спасибо!

poacher2k 29 авг. 2016

@ poacher2k Спасибо за пример. Я изучил ошибку и исправил ее в №16.

Попробуйте npm update html-react-parser или npm install [email protected] и дайте мне знать, устранит ли это ошибку для вас.

remarkablemark 29 авг. 2016

😄1 👍1

Это исправлено, еще раз спасибо! Рад видеть, что вы также добавили проверки для других элементов void!

poacher2k 29 авг. 2016

Приятно слышать, и добро пожаловать! 👍

remarkablemark 29 авг. 2016

@remarkablemark Я все еще сталкиваюсь с проблемой, и код npm install [email protected] не обновлен в этой версии.

vidit1 5 янв. 2018

@ vidit1 Можете ли вы подтвердить, что установили версию latest ?

npm i html-react-parser<strong i="8">@latest</strong>

# or
npm i [email protected]

Затем проверьте, выполнив:

npm ls html-react-parser

remarkablemark 5 янв. 2018

@remarkablemark Я обновил последнюю версию html- Элемент находится внутри компонента material-ui.
<Drawer> <div className="alert" role="alert"> <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" className="d-inline-block align-top" alt=""> Bootstrap </img> </div> </Drawer>

blueskysmart 12 янв. 2018

@blueskysmart : у вас есть текст «Bootstrap» внутри вашего тега img . Как говорится в ошибке, img является пустым элементом и не может иметь дочерних элементов.

См. Комментарий @remarkablemark ниже, чтобы узнать, как это исправить.

poacher2k 12 янв. 2018

👍1

@blueskysmart Комментарий, сделанный @ poacher2k , правильный. Вы можете увидеть воспроизведение этой ошибки на этой скрипке .

remarkablemark 12 янв. 2018

Хорошо, понятно. Спасибо.

blueskysmart 22 янв. 2018

Эта ошибка возникает также, если вы попытаетесь разобрать это:
<img src="img.jpg".>

Чтобы он работал, оберните его в div: