javascript - 使用 Split Map 时 JSX 额外的空白

Question

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

另外，如果我只显示 {this.state.info}里面<Text>组件，布局符合预期。 它只会破坏分割和 map 功能。

预期结果:

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

例如，“this||text”实际上应该是:
“这个
文本”

这是我的代码。它在“||”处 split 并将每个段放入段落中，然后替换字符串 <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>