React-Bootstrap：如果文​​本存储在状态变量中，为什么要为Alert组件显示不同的文本？

Question

我正在使用针对Bootstrap v3的react-bootstrap，并且正在使用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

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

这是一种解决方法。

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

希望这会有所帮助。