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

Question

这里我将属性标签存储在数组对象中的字符串中，这里我使用 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.....是一个字符串。如何在此处将其打印为属性，以便我的代码完美呈现？我还在下面提供输出，以便更好地理解。

Answer 1

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

<td dangerouslySetInnerHTML={{__html: info.dt1}}/>
...

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

Print an HTML tag from a string in an array using React

javascript

reactjs

mern

react-hooks