Блог

Главная - Вопросы по программированию - Как отобразить отформатированную строку шаблона в React вместо одного абзаца?

Как отобразить отформатированную строку шаблона в React вместо одного абзаца?

#javascript #reactjs #string #string-literals #template-literals

Вопрос:

Я устанавливаю свое состояние следующим образом —

 setMessage(color, text) {
        this.setState({ message: { color: color, text: text } });
    }

body = `These are your options to raise money:​
Increase your credit allowance (invite new people into the game, this increases your overdraft auto`

this.setMessage('red', `${body}` );

Я визуализирую его как {this.state.message.text}, однако он не отображает несколько строк, вместо этого все это сжимается в один абзац.

Как мне это исправить и визуализировать?

Комментарии:

1. HTML по умолчанию свернет пробелы. Вы можете сохранить пробелы с помощью css white-space: pre

2. Но я визуализирую его с помощью {this.state.message.text}, как именно мне установить этот стиль для этого?

Ответ №1:

Для этого вы можете использовать Jsx. Я тоже сталкивался с этой проблемой, я решил ее так, и это сработало для меня. Вы можете использовать либо тег фрагмента реакции, либо любой допустимый тег jsx

 setMessage(color, text) {
        this.setState({ message: { color: color, text: text } });
    }

body = <>These are your options to raise money:​<br />
Increase your credit allowance (invite new people into the game, this increases your overdraft auto</>

this.setMessage('red', body );
Метки: