Question

我尝试使用React JS和JSX输出以下HTML结构。我不想使用dangerouslySetInnerHTML，因为我们的用户可以设置此数据。

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

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

据我所知，三级条件是必需的，没有if在JSX return语句中工作。这只是在页面上输出文本，<br />标签不会被解释为HTML。

是否可以按照我的示例输出，或者我将不得不取消<br />标记并使用<div> s作为换行符？

Answer 1

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

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

Answer 2

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

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

Answer 3

这是我的功能，仅适用于BR标签

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

使用方法：

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

Answer 4

通过分别使用for循环和push-ing文本行和<br/>，您可以或多或少地优雅地做到这一点：

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

在JSX中使用<br/>标签输出纯文本

4 个答案: