insert html tags inside the jsx object for mapping

问题

I have a string inside an object with some HTML tags in it, and I want to print the values inside that object using map function.

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>

when I run this code, I want that <strong> tag inside the string compiled as an HTML element instead of rendered as plain text. So is there any way to achieve this guys?

回答1:

You should render ReactElement or use 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>
  );
}

Playground:

回答2:

You could use dangerouslySetInnerHTML but that's not a good practice. You can look up methods to sanitize you HTML before inserting it with dangerouslySetInnerHTML or you could change your json structure ( if that's possible and/or feasible )

Split your item into another object like:

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

And then in JSX

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

回答3:

you need to install html react parser pacakge

npm install react-html-parser

and here is your answer :-

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>

回答4:

First you should not name the variable you are accessing in the map func the same as the variable your are running map on so

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

Should be something like

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

来源：https://stackoverflow.com/questions/57955460/insert-html-tags-inside-the-jsx-object-for-mapping

标签

javascript

reactjs

jsx