Reactjs 使用<；输出纯文本；br/>；JSX中的标记

我尝试使用React JS和JSX输出以下HTML结构。我不想使用

危险的LySetinerHTML

，因为这些数据是用户可以设置的

任何一行都可能丢失，因为不需要任何数据，并且不应留下空白行，如数据

<p>
  one<br />
  two<br />
  three<br />
  four
</p>

一个

两个

三个

四

我目前有：

<p className='address__details'>
  { this.line_1.length > 0 ? `${this.line_1}<br />` : `` }
  { this.line_2.length > 0 ? `${this.line_2}<br />` : `` }
  { this.line_3.length > 0 ? `${this.line_3}<br />` : `` }
  { this.line_4.length > 0 ? `${this.line_4}<br />` : `` }
</p>

{this.line_1.length>0？`${this.line_1}
`:`}
{this.line_2.length>0？`${this.line_2}
`:`}
{this.line_3.length>0？`${this.line_3}
`:`}
{this.line_4.length>0？`${this.line_4}
`:`}

据我所知，如果在JSX返回语句中工作，则不需要第三个条件。这只是在页面上输出文本，

标记不会被解释为HTML

---

是否可以像我的示例中那样输出此内容，或者我必须去掉

标记并使用

s作为换行符？

字符串中的任何HTML标记都将被转义，因此您必须使用容器元素正确地包装行：

{ this.line_1.length > 0 ? <p>{ this.line_1 }</p> : null }

{this.line_1.length>0？{this.line_1}
:null}

虽然不是特别优雅，但您可以这样做

{ this.line_1.length > 0 ? `${this.line_1}` : `` }{ this.line_1.length > 0 ? <br /> : null}

{this.line\u 1.length>0？`${this.line\u 1}`:`}{this.line\u 1.length>0？
：null}

这是我的函数，仅适用于BR标签

function textToHtml(html)
{
    let arr = html.split(/<br\s*\/?>/i);
    return arr.reduce((el, a) => el.concat(a, <br />), []);
}

函数textToHtml（html）
{
设arr=html.split（//i）；
返回arr.reduce（（el，a）=>el.concat（a，
），[]）；
}

如何使用：

<p>{textToHtml(this.state.text)}</p>

{textToHtml（this.state.text）}

通过使用for loop和

分别按下文本行和

可以或多或少优雅地完成此操作：

const textLines = [ "one", "two", "three", "four" ]
const lines = []
for (var item of textLines) {
  lines.push(item)
  lines.push(<br/>)
}
return (<p>{lines}</p>)

const textLines=[“一”、“二”、“三”、“四”]
常量行=[]
for（文本行的变量项）{
行。推送（项目）
行。推送（
）
}
返回（{lines}
）
 >我基本上无法摆脱元素中每一行的缠绕？@ TuniLey，我不这么认为，除非你愿意考虑CSS解决方案，比如