Question

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

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和text-align。

更新：我也曾尝试在App.js render()方法中这样做：

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

我将其从按钮更改为警报，什么也看不到。就是说，当我使用浏览器，模拟移动设备然后检查元素（在其中查找元素和样式）时，可以取消选中具有“不透明度0”的框或编辑值。假设我将按钮更改为Alert，如何在代码中做到这一点？

为什么我的React组件没有显示或根本不起作用？

0 个答案: