我如何使我的ReactJs应用程序显示不同的消息时，在不同的屏幕?

Question

我必须用ReactJs克隆一个网站，它只在桌面上工作。当它在移动视图或平板电脑上查看时…它显示"网站在手机上不可用"。我也想这么做....但是它不能在我的网站上工作

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的主要部分....的代码有人可以帮助我使我的应用程序响应…因为我是新手。如果您需要其他代码，请告诉我

Answer 1

可以使用isMobile进行条件渲染

import {isMobile} from 'react-device-detect';
...
if (isMobile) {
return <MobileTablet />
}

``

Answer 2

看，你可以使用State来监视客户端窗口的视口，然后使用useEffect来改变它。属性窗口。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>
);
}