React-Bootstrap: почему компонент Alert отображает текст по-другому, если текст хранится в переменной состояния?

Question

Я использую реагирующую загрузку, которая предназначена для Bootstrap v3, и я использую компонент Alert для показа сообщений пользователю.

Кроме того, мне нужно показывать сообщения с несколькими строками.Для разрыва строки я использую.

Если я «жестко закодировал» многострочный текст внутри компонента Alert, компонент работает, как и ожидалось, показывая несколько строк.

Но если я использую переменную, которая принадлежит состояниюродительский компонент не работает.

В чем причина такого поведения?

class MyAlert extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Hello <br /> world! <br /> This line ..."
    };
  }

  render() {
    return (
      <div>
        <Alert bsStyle="warning">{this.state.message}</Alert>

        <Alert bsStyle="info">
          "Hello <br /> world! <br /> This line ..."
        </Alert>
      </div>
    );
  }
} //MyAlert

Здесь вывод:

Answer 1

Второй <Alert> с bsStyle, установленным в info, отображает его как HTML, а не как строку.Обратите внимание, что кавычки отображаются.Так что это не строка.Принимая во внимание, что this.state.message является строкой, поэтому она не интерпретирует <br /> как разрыв строки.Надеюсь, что это имеет смысл.

Вот обходной путь.

<Alert bsStyle="warning">
  <p dangerouslySetInnerHTML={{ __html: this.state.message }}></p>
</Alert>

Надеюсь, это поможет.