使用 Split Map 时的 JSX 额外空白

Question

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

另外，如果我在<Text> 组件内仅显示{this.state.info}，则布局符合预期。 它只与 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>