根据屏幕尺寸（react-app）选择要显示给用户的组件的最佳方法

发布于 2025-01-21 11:51:41 字数 755 浏览 1 评论 0原文

我正在使用React应用程序，并且有一个要显示的项目列表。因此，我想拥有一个＆lt; items项目= {data}/＆gt; component，但＆lt; itemp; tockes itemp = {data}/＆gt;组件中的样式- 视图和桌面视图是完全不同的，因此我决定制作2个组件，

<MobileViewItems items ={data}/>
<DesktopViewItems items={data}/>

我只想根据屏幕尺寸显示这些组件之一。

我知道我可以使用CSS媒体查询根据屏幕大小显示或隐藏元素，我在线搜索并发现了此软件包，称为 react-media： https://github.com/reaecttraining/reaecttraining/reaecttraining/reaecttraining/reaecttraining/reaect-media React-Media允许我们执行此逻辑，以选择一个基于JavaScript中屏幕尺寸显示的组件。

还有其他方法可以解决这个问题，最好的方法是什么？为什么？

假设传递的数据作为道具很大，就像5000个项目的数组一样。

原文

I am working with a react app, and i have a list of items to be displayed. So i want to have a <Items items={data}/> component but the styling for <Items items={data}/> component in mobile-view and desktop-view is completely different, so i decided to make 2 components

<MobileViewItems items ={data}/>
<DesktopViewItems items={data}/>

I only want to show one of these components based on screen size.

I know i can use css media queries to show or hide an element based on screen size and i searched online and found out about this package called
react-media: https://github.com/ReactTraining/react-media
react-media allows us to do this logic of choosing a component to show based on screen size in javascript.

Are there any other ways to solve this problem, and what is the best way to do it and why?

Assume that the data passed as props is huge, like an array of 5000 items.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

栖竹 2025-01-28 11:51:41

这是很好的答案，您应该检查一下。

https://stackoverflow.com/a/a/60932511/6912349

简短的答案是有一个简短的答案。 //www.npmjs.com/package/reaeact-device-detect“ rel =“ nofollow noreferrer”> React设备检测包库为您提供帮助。

该库允许您以这样的方式编写代码：

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

function App() {
  renderContent = () => {
    if (isMobile) {
      return <div> This content is available only on mobile</div>
    }
    return <div> ...content </div>
  }

  render() {
    return this.renderContent();
  }
}

This is pretty good answer here, you should check it out.

https://stackoverflow.com/a/60932511/6912349

Short answer is there is a React Device Detect Package library to help you with this.

This library allows you to write code like this:

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

function App() {
  renderContent = () => {
    if (isMobile) {
      return <div> This content is available only on mobile</div>
    }
    return <div> ...content </div>
  }

  render() {
    return this.renderContent();
  }
}

回复收藏 0 原文

~没有更多了~