Html-react-parser: 错误：img 是一个空元素标签，既不能有 `children` 也不能使用 `dangerouslySetInnerHTML`

创建于 2016-08-26 · 14评论 · 资料来源: remarkablemark/html-react-parser

你好！

很棒的插件，真的认为这对我正在做的事情会有帮助。

我注意到解析任何img -element 会导致上述错误。这也可能适用于任何永远不应该有子元素的元素。

一个临时的解决方法是使用这样的东西：

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 于 2019-05-28

👍2 😕1

所有14条评论

谢谢你让我知道。你有一个例子，所以我可以重现这个错误？

remarkablemark 于 2016-08-26

你好！
您可以使用以下方法重现此内容：
ReactDOM.render(Parser('<div><img src="" alt=""/></div>'), document.getElementById('root'));

poacher2k 于 2016-08-29

太棒了，谢谢你！

poacher2k 于 2016-08-29

@poacher2k谢谢你的例子。我已经调查了该错误并在 #16 中进行了修复。

尝试npm update html-react-parser或npm install [email protected]并告诉我这是否为您消除了错误。

remarkablemark 于 2016-08-29

😄1 👍1

解决了，再次感谢！很高兴看到您还添加了对其他空元素的检查！

poacher2k 于 2016-08-29

很高兴听到，不客气！ 👍

remarkablemark 于 2016-08-29

@remarkablemark我仍然面临这个问题，并且 npm install [email protected]代码在这个版本中没有更新。

vidit1 于 2018-01-05

@vidit1你能确认你安装了latest版本吗？

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

# or
npm i [email protected]

然后通过执行以下操作验证：

npm ls html-react-parser

remarkablemark 于 2018-01-05

@remarkablemark我更新了最新版本的 html-react-parser，但仍然面临这个问题。我的元素位于 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 于 2018-01-12

@blueskysmart ：您的img -tag 中有文本“Bootstrap”。正如错误所说， img是一个空元素，不能有任何子元素。

有关如何修复它的指导，请参阅下面的@remarkablemark评论。

poacher2k 于 2018-01-12

👍1

@blueskysmart @ poacher2k的评论是正确的。你可以在这个fiddle 中看到这个错误的再现。

remarkablemark 于 2018-01-12

好的，我明白了。谢谢你。

blueskysmart 于 2018-01-22

如果您仅尝试解析此错误，也会出现此错误：
<img src="img.jpg".>

要使其工作，请将其包装在一个 div 中：

<div>
<img src="img.jpg".>
</div>

cipiripper 于 2018-10-31

👍1

我遇到了这个问题，因为我试图将孩子添加到 img 标签......

Sshetty2 于 2019-05-28

👍2 😕1

此页面是否有帮助？

0 / 5 - 0 等级

Html-react-parser: 错误：img 是一个空元素标签，既不能有 `children` 也不能使用 `dangerouslySetInnerHTML`

最有用的评论

所有14条评论

相关问题