我正在尝试渲染一个 json 列表,其中列表中的字符串中包含 html 标签,如下所示jsbin https://jsbin.com/deqiqeb/edit?js,console,output。它可以在 Jsbin 中运行。但在我的控制台中我收到以下警告:
warning Only set one of `children` or `props.dangerouslySetInnerHTML` react/no-danger-with-children
只是想知道是否还有其他方法可以使用angerouslySetInnerHTML 呈现列表以避免警告?
const displayList = [
{
item: 1,
text: "<strong>ABC</strong> this should be strong."
},
{
item: 2,
text: "<a>ABC</a> this should be link."
},
{
item: 3,
text: "normal text"
}
];
const App = () => (
<ul>
{displayList.map((item, i) => (
<li key={i}>
<div dangerouslySetInnerHTML={{
__html: item.text
}}>
</div>
</li>
))}
</ul>
);
ReactDOM.render(
<App />,
document.getElementById('root')
);
React 正在抱怨使用dangerouslySetInnerHTML
与安全反应孩子一起,当你让 div 标签打开这样的特性时,就会发生这种情况<div>open and ready for children</div>
.
由于您使用的是 JSX 语法扩展,因此这里的解决方案是将整个句子写在一行中:
<div dangerouslySetInnerHTML={{__html: item.text}}></div>
或者只使用单例 div 标签:
<div dangerouslySetInnerHTML={{
__html: item.text
}}/>
顺便说一句,您不会在 jsbin 上收到错误,因为它是一个 React 生产版本,这个版本并不是为了告诉您可以写得更好。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)