Javascript 在react中将普通字符串转换为html

**如何在reactjs中将此纯文本转换为HTML

**Text:** 

The standard Lorem Ipsum passage, used since the 1500s

Lorem ipsum dolor sit amet, consectetur adipiscing elit

它会自动进行如下转换：

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

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

标准的Lorem Ipsum通道，自16世纪开始使用

Lorem ipsum dolor sit amet，献祭精英

---

您可以将所需字符串存储在状态或简单变量中，甚至可以从props传递

然后在渲染时，可以将它们映射为html元素

代码

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;

const DemoComponent=props=>{
const strings=['自16世纪以来使用的标准Lorem Ipsum段落'，
“Lorem ipsum dolor sit amet，献祭精英]
返回(
{strings.map（element=>{element}
）}
);
}
导出默认组件；

---

注意-我没有运行此代码，但逻辑是相同的

我不确定您想做什么，但您可以将字符串逐行拆分，下面是一个示例：

<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>

{`标准的Lorem Ipsum通道，从16世纪开始使用
Lorem ipsum dolor sit amet，献祭精英`
.split（“\n”）
.map（（行）=>(
{line}
))}

---

你可以在这个

中看到结果，你的意思是将纯文本转换成

p

标记？是的，你的代码工作正常。但您希望将此数据保存在变量中。如下所示：自16世纪以来使用的标准Lorem Ipsum通道

Lorem Ipsum dolor sit amet，Concetetur Adipsing Elite