大佬教程收集整理的这篇文章主要介绍了使用 React 从数组中的字符串打印 HTML 标记,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这里我将属性标签存储在数组对象中的字符串中,这里我使用 map 函数渲染它,但它没有将它从字符串转换回属性。
请告诉我如何才能做到这一点。
这是我代码的渲染部分。
return (
<div classname="gm panel panel-default table-responsive">
<table classname="displayresults">
<thead>
<tr>
<th wIDth="200"></th>
{dates.map((date,indeX) => {
return (
<th wIDth="100">
<div classname="dt">{datE}</div>
</th>
);
})}
</tr>
</thead>
<tbody>
{row.map((info,indeX) => {
return (
<tr>
<td>
<div classname="up">{info.namE}</div>
<div classname="down">
{info.address},{info.diStrict_name},{info.state_namE},{" "}
{info.pincodE}
</div>
</td>
<td>{info.dt1}</td>
<td>{info.dt2}</td>
<td>{info.dt3}</td>
<td>{info.dt4}</td>
<td>{info.dt5}</td>
<td>{info.dt6}</td>
<td>{info.dt7}</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
这里的 info.dt1
,info.dt2
..... 是一个字符串。如何在此处将其作为属性打印,以便我的代码完美呈现?为了更好地理解,我还在下面提供了输出。
https://reactjs.org/docs/dom-elements.html#dangerouslyseTinnerhtml
dangerouslySeTinnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品。 一般来说,从代码中设置 HTML 是有风险的,因为很容易在不经意间让您的用户遭受跨站脚本 (XSS) 攻击。因此,您可以直接从 React 设置 HTML,但您必须输入取出危险的SeTinnerHTML 并传递一个带有__html 键的对象,以提醒自己这是危险的。
<td dangerouslySeTinnerHTML={{__html: info.dt1}}/>
...
以上是大佬教程为你收集整理的使用 React 从数组中的字符串打印 HTML 标记全部内容,希望文章能够帮你解决使用 React 从数组中的字符串打印 HTML 标记所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。