JSX дополнительный пробел при использовании Split Map

Question

Как мне убрать этот пробел? Как вы можете видеть из моего кода, «Описание» должно быть отдельной строкой, а текст должен идти под ним. Эта проблема возникает только для некоторых строк из базы данных , но AFAIK строки из базы данных по сути одинаковы - разные сообщения, но одинакового точного формата.

Кроме того, если я отображал только{this.state.info} внутри компонента <Text>, расположение соответствует ожидаемому. Разрывается только с функциями разделения и отображения.

Ожидаемый результат:

Я пытаюсь разбить текст, this.state.info в JS React. Текст содержит "||"разделитель, который указывает на разрыв новой строки.

Например, «этот || текст» должен быть действительно:
«Этот
текст»

Вот мой код. Он разделяется на '||'и помещает каждый сегмент в абзацы, а затем также заменяет строку <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>