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来说，它只是逐字打印而不被解释：

I know the alert can interpret the HTML since the online documentation shows it doing it. Below is an example of a horizontal rule being displayed in the alert:

我的问题是在示例为静态的情况下动态设置了我的文本。关于如何在动态设置警报时强制显示多个行的任何想法？

我查看了一些具有类似问题的不同帖子。 The closest I have come is this one, but I think they are using different versions since the 'bsStyle' referenced is not documented anywhere that I can find in react-bootstrap.

非常感谢您的考虑。

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>
  );
};

有了这个，您的警报将如下所示：

此后，您可以根据需要管理警报。

react-bootstrap多行警报可动态设置数据

1 个答案: