在反应中将纯字符串转换为 html

Question

**How can I convert this plain text to HTML in reactjs?

**Text:** 

The standard Lorem Ipsum passage, used since the 1500s

Lorem ipsum dolor sit amet, consectetur adipiscing elit

It automatically converts like this:

<p>The standard Lorem Ipsum passage, used since the 1500s</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

Answer 1

I'm not sure what you are trying to do, but you can split the string line by line, here's an example:

<div>
  {`The standard Lorem Ipsum passage, used since the 1500s
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit`
    .split("\n")
    .map((line) => (
      <p style={{ backgroundColor: "#D8DC6A" }}>{line}</p>
    ))}
</div>

You can see the results in this code sandbox

Answer 2

You can store the needed strings in a state or simple variables or even can pass from props.

Then on rendering, you can map them as html elements.

code

const DemoComponent = props => {
  const strings = ['The standard Lorem Ipsum passage, used since the 1500s',
                   'Lorem ipsum dolor sit amet, consectetur adipiscing elit]
  return (
  <div>
    {strings.map( element => <p> {element}</p>)}
  </div>);

}

export default DemoComponent;

Note - i have not run this code, but the logic would be same