在 jsx 对象内插入 html 标签以进行映射

Question

我在一个带有一些 HTML 标记的对象中有一个字符串，我想使用 map 函数打印该对象中的值。

const tableBody = [
  {
    date: '02/08/2019',
    item: 'Renewed your <strong>current Team Plan</strong>'
  },
  {
    date: '05/09/2019',
    item: 'Renewed your current Team Plan 2'
  },
  {
    date: '15/10/2019',
    item: 'Renewed and upgraded to the <strong> Business Plan </strong> with 3 new members'
  }
];


<table>
{tableBody.map(tableBody => (
  <tr>
   <td>{tableBody.date}</td>
   <td>{tableBody.item}</td>
  </tr>
))}
</table>

当我运行此代码时，我希望字符串中的 <strong> 标记编译为 HTML 元素，而不是呈现为纯文本。那么有什么方法可以实现这些吗？

Answer 1

你应该渲染ReactElement或使用dangerouslySetInnerHTML

const tableBody = [
  {
    date: '02/08/2019',
    item: (
//    v <React.Fragment>
      <>
        Renewed your <strong>current Team Plan</strong>
      </>
    )
  }
];


export default function App() {
  return (
    <FlexBox>
      <table>
//                      v Notice the shadowing in OP's code
        {tableBody.map(tableBody => (
          <tr>
            <td>{tableBody.date}</td>
//                v ReactElement
            <td>{tableBody.item}</td>
          </tr>
        ))}
      </table>

//    v `dangerouslySetInnerHTML` example
      <table>
        <tr>
          <td>{'02/08/2019'}</td>
          <td
            dangerouslySetInnerHTML={{
//                      v A string, exposed to attacks, not recommended
              __html: 'Renewed your <strong>current Team Plan</strong>'
            }}
          />
        </tr>
      </table>
    </FlexBox>
  );
}

游乐场：

Answer 2

你需要安装html react parser pacakge

npm install react-html-parser

这是你的答案：-

import ReactHtmlParser from 'react-html-parser';

const tableBody = [
  {
    date: '02/08/2019',
    item: 'Renewed your <strong>current Team Plan</strong>'
  },
  {
    date: '05/09/2019',
    item: 'Renewed your current Team Plan 2'
  },
  {
    date: '15/10/2019',
    item: 'Renewed and upgraded to the <strong> Business Plan </strong> with 3 new members'
  }
];


<table>
  <tbody>
{tableBody.map((tableBody,i) => (
  <tr key={i}>
   <td>{tableBody.date}</td>
   <td>{ReactHtmlParser(tableBody.item)}</td>
  </tr>
))}
</tbody>
</table>

Answer 3

您可以使用dangerouslySetInnerHTML，但这不是一个好习惯。您可以在使用dangerouslySetInnerHTML 插入 HTML 之前查找清理 HTML 的方法，或者您可以更改 json 结构（如果可能和/或可行的话）

将您的项目拆分为另一个对象，例如：

item : { 
   first: ' some text ', 
   second: 'the strong text', 
   third :' the other text' 
} 

然后在 JSX 中

<td>{tableBody.item.first} <strong>{tableBody.item.second}</strong> {tableBody.item.third}</td>

Answer 4

首先，您不应该将您在 map func 中访问的变量命名为与您正在运行 map 的变量相同的变量

    {tableBody.map(tableBody => (
  <tr>
   <td>{tableBody.date}</td>
   <td>{tableBody.item}</td>
  </tr>
))}

应该是这样的

{tableBody.map(tableItem => (
  <tr>
   <td>{tableItem.date}</td>
   <td>{tableItem.item}</td>
  </tr>
))}