reactjs - React-Bootstrap：如果文​​本存储在状态变量中，为什么会以不同的方式呈现 Alert 组件的文本？

Question

我正在使用针对 Bootstrap v3 的 react-bootstrap，并且我正在使用 Alert 组件向用户显示消息。

此外，我需要显示多行消息。对于换行符，我使用 <br />。

如果我“硬编码” 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

这里的输出：

标签： reactjsreact-bootstrap

Answer 1

bsStyle 设置为 info的第二个<Alert>是将其呈现为 HTML 而不是字符串。请注意，引号正在显示。所以，它不是一个字符串。而，this.state.message是一个字符串，因此它不会将其解释<br />为换行符。希望这是有道理的。

这是一个解决方法。

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

希望这可以帮助。