为什么我尝试向用户显示警报时抛出错误？

Question

我希望在移动设备上使用我的应用程序的用户看到可忽略的警报，告诉他们不应在移动设备上使用该网站。但是，当我测试已尝试的代码时，会出现错误。

我尝试导入我在网站上提到的软件包，并编写我希望用户看到的警报文本。

render() {
  if (isMobile){
    return (
      <Alert>
        <Alert.Heading>Mobile Browser Detected</Alert.Heading>
        <p>
          This page is not optimized for mobile. Please view this page on a desktop.
        </p>
      </Alert>
    );
  }

  return (...);  // For when it's not on mobile
}

我希望屏幕上会显示一些可忽略的警报，可以将其取消，但不会完全阻止该人查看页面。相反，我得到一个错误（通过“检查元素”使用移动模拟器时）：

  

元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。

     

检查App的呈现方法。

Answer 1

就像警告说的那样，

  

您可能混淆了默认导入和命名导入。

我相信导入Alert的正确方法是：

import Alert from 'react-bootstrap/Alert'

您可以在React-Bootstrap docs上阅读更多有关正确使用案例的信息。