многострочное оповещение о реакции на загрузку для динамически устанавливаемых данных

Question

Я использую версии:

react@16.8.6
react-bootstrap@1.0.0-beta.8

У меня есть предупреждение, содержимое которого динамически изменяется в зависимости от того, что пользователь делает со страницей:

<Alert variant="danger" show={this.state.showDangerAlert}>{this.state.dangerAlertText}</Alert>

В некоторых случаяхЕсть несколько сообщений, которые должны быть отображены.Я пытаюсь отобразить каждое сообщение в отдельной строке.Я пытался использовать новые строки и различные структуры HTML.Новая строка не отображается, но данные также не находятся на новой строке:

Что касается HTML, то он просто дословно печатается ине интерпретируется:

Я знаю, что предупреждение может интерпретировать HTML, поскольку онлайн-документация показывает, что он это делает.Ниже приведен пример горизонтального правила, отображаемого в предупреждении:

Моя проблема заключается в том, что мой текст задается динамически там, гдеПример статичен.Любые идеи о том, как заставить оповещение отображать несколько строк, когда оно установлено динамически?

Я рассмотрел несколько различных постов с похожими проблемами. Самое близкое, что я пришел, это тот, но я думаю, что они используют разные версии, поскольку ссылка на 'bsStyle' нигде не документирована, что я могу найти в реакции-бутстрапе.

Спасибомного для вашего рассмотрения.

Answer 1

Я обычно использую уникальные alert поля для каждого предупреждающего сообщения.Таким образом, пользователь может легко закрыть их один за другим.Если вы действительно хотите показать все сообщения внутри одного предупреждения, я предлагаю вам это.Используйте массив внутри вашего компонента, где вы обрабатываете предупреждение.

Предположим, что вы храните свое предупреждение внутри массива где-нибудь, например:

const alerts = ['First line', 'Second line', 'Third line'];

Тогда ваш компонент должен получить их и отобразитьих следующим образом:

const YourOwnComponent = props => {
  const { alerts } = props;

  return (
    <Alert>
      {alerts.map(line => (
        <p>{line}</p>
      ))}
    </Alert>
  );
};

При этом ваше оповещение будет выглядеть так:

После этого вы сможете управлять своим оповещением по своему усмотрению.