使用分割地图时，JSX会有额外的空白

Question

如何删除此空白？正如您从我的代码中看到的那样，“描述”应位于其单独的行上，并且文本应位于其下方。 仅对于数据库中的某些字符串会发生此问题，但是AFAIK数据库中的字符串基本上都是相同的-消息不同但格式完全相同。

此外，如果我仅在{this.state.info}组件内显示<Text>，则布局是预期的。 它仅与split和map功能中断。

预期结果：

我正在尝试在JS React中拆分文本this.state.info。文本包含“ ||”表示新换行符的定界符。

例如，“ this || text”应为：
“这个
文字”

这是我的代码。它在“ ||”上分割并将每个段放入段落中，然后还将文本中的字符串<p>替换为空字符串（如果有）。

            <Text fontStyle={TEXT_STYLE.BOLD}>Description</Text>
            <div
              className="textMinimumHeight"
              style={{minHeight: "111px"}}>
              <Text>
                {this.state.info.split('||').map((item, i) => {
                  return <p key={i}>{item.replace('<p>', '')}</p>;})
                }
              </Text>
            </div>

感谢您的帮助！

Answer 1

您可以尝试执行以下操作：

1. <Text fontStyle={TEXT_STYLE.BOLD}>{`Description\n`}</Text>

2. <Text fontStyle={TEXT_STYLE.BOLD}>Description{`\n`}</Text>

or just put description inside <p> tag

3. <Text fontStyle={TEXT_STYLE.BOLD}><p>Description</p></Text>