程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用 React 从数组中的字符串打印 HTML 标记大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决使用 React 从数组中的字符串打印 HTML 标记?

开发过程中遇到使用 React 从数组中的字符串打印 HTML 标记的问题如何解决?下面主要结合日常开发的经验,给出你关于使用 React 从数组中的字符串打印 HTML 标记的解决方法建议,希望对你解决使用 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 ..... 是一个字符串。如何在此处将其作为属性打印,以便我的代码完美呈现?为了更好地理解,我还在下面提供了输出。

使用 React 从数组中的字符串打印 HTML 标记

解决方法

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,请注明来意。