如何让我的 ReactJs 应用程序在不同屏幕中显示不同的消息？答案

【问题标题】：How do I make my ReactJs app display A different message when In different screens?如何让我的 ReactJs 应用程序在不同屏幕中显示不同的消息？
【发布时间】：2021-09-12 15:18:23
【问题描述】：

我必须使用仅适用于桌面的 ReactJs 克隆一个网站。当它在移动视图或平板电脑中查看时......它显示“SITE NOT AVAILABLE ON MOBILE”。我也想这样做....但它在我的网站上不起作用

import "./App.css";
import Navbar from "./components/Navbar";
import Text from "./components/Text";
import Slider from "./components/Slider";
import Wallet from "./components/Wallet";
import Dropdown from "./components/Dropdown";
import MobileTablet from "./components/MobileTablet";
import { BrowserView, MobileView } from "react-device-detect";

import { BrowserRouter as Router } from "react-router-dom";

function App() {
  return (
    <>
      <BrowserView>
        <Router>
          <Text />
          <div className="box">
            <Navbar />
            <Dropdown />
            <div className="box2">
              <Slider />
            </div>
          </div>
          <div className="box3">
            <Wallet />
          </div>
        </Router>
      </BrowserView>
      <MobileView>
        <MobileTablet />
      </MobileView>
    </>
  );
}

export default App;

这是 App.js 的主要部分的代码....有人可以帮助我使我的应用程序响应...因为我对此很陌生。如果您需要任何其他代码，请告诉我

【问题讨论】：

我可以看到您正在使用react-device-detect，并且 IDK 您遇到了什么样的错误，我认为您最好先按照文档说明他们的示例，然后再找出根本原因
没有错误，但也没有显示我想要的消息。我确实参考了他们的文档
您尝试过他们的isMobile 进行条件渲染吗？
使用“react-device-detect”或 CSS 媒体查询来隐藏和显示您的内容，或使用引导类“d-none d-md-block”和“d-block d-md-无”

标签： javascript html css reactjs

【解决方案1】：

您可以使用isMobile 进行条件渲染

import {isMobile} from 'react-device-detect';
...

    if (isMobile) {
        return <MobileTablet />
    }


``

【讨论】：

【解决方案2】：

看，你可以使用 State 来监控客户端窗口的视口，然后使用 useEffect 来改变它。属性 window.innerWidth 为您提供客户端的宽度，然后您可以指定它仅在特定条件下工作：

 import { useState, useEffect } from "react";

export default function App() {
  const [userIsDesktop, setUserIsDesktop] = useState(true);
  useEffect(() => {
    window.innerWidth > 1280 ? setUserIsDesktop(true) : setUserIsDesktop(false);
  }, [userIsDesktop]);

  return (
    <div className="App">
      {userIsDesktop ? <h1>i'm a desktop</h1> : <h1>i'm a mobile</h1>}
    </div>
  );
}

【讨论】：

1920 是全高清屏幕，所以在普通桌面屏幕上它会显示移动 UI！考虑从 1280 开始的普通旧桌面显示器，...