reactjs - 在字符串道具中添加换行符（ ）？

Question

我正在用 React 创建一个网站。我有一些文本道具，我想插入换行符 (br) 或 li ...但我做不到。

一个例子：我的组件的提取物：

<article className="vertebra">
    <section className="vertebra-content container">
         <div className="flexitem">
             <h2 className="h2-like">{props.title}</h2>
             <p>{props.text}</p>
         </div> 
     </section>
</article>

我的应用程序：

<MainVertebra
    title="blablabla"
    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />

---

如何在 props.text 中进行换行或列表？

标签： reactjsstringreact-props

Answer 1

使用危险的SetInnerHTML 。

您可以在字符串中包含任何标签，例如<br/>, 。<li/>props.text

<p dangerouslySetInnerHTML={{ __html: props.text}}></p>