reactjs - 为什么我的 React 组件没有显示或根本没有动作？

Question

如果有人试图在移动浏览器上查看我的网页，我想在屏幕上弹出一条通知，告诉他们这是不可能的。我最初尝试将其硬编码到App.js类中，但决定使用一个组件。但是，当我尝试查看是否转到移动设备（通过右键单击 + 检查元素提供的 Edge 仿真）时，没有显示任何通知。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom'
import { Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
import { useAlert } from 'react-alert'
import { isMobile } from 'react-device-detect';
import { Alert } from 'reactstrap';
import { UncontrolledAlert } from 'reactstrap';

class Disclaimer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: true
    };

    this.onDismiss = this.onDismiss.bind(this);
  }

  onDismiss() {
    this.setState({ visible: false });
  }

  render(){
      return(
        <Alert color="danger" isOpen={this.state.visible} toggle={this.onDismiss}>
          This webpage is not optimized for mobile.
        </Alert>
      );


    }
  }
}

export default Disclaimer;

我最终调用这个组件在 App.js 中返回，但我看不到它。但是，当我查看“元素”时，我确实在层次结构中看到了它，并且屏幕上有一个位置给出了轮廓，但就警报应该做什么而言，没有任何可见的东西。我确实有一个用于警报的 .css 文件，但它只是font-family和.css 文件text-align。

更新：我也试过在 App.jsrender()方法中这样做：

<MobileView>
<button
  onLoad={() => {
    if(isMobile){
      alert.show('This page is not optimized for mobile!')
    }
  }}
>
  Show Alert
</button>
</MobileView>

我将它从按钮更改为警报，并且看不到任何内容。话虽如此，当我使用浏览器，模拟移动设备，然后检查元素时，我可以转到元素和样式，我可以取消选中具有“不透明度 0”的框或编辑该值。假设我将按钮更改为警报，我该如何在代码中执行此操作？？？

标签： reactjsreact-component