React condtional (移动视图和桌面视图)问题

基础概念

React 是一个用于构建用户界面的 JavaScript 库。条件渲染（Conditional Rendering）是指根据某些条件来决定组件是否渲染或渲染什么内容。这在实现响应式设计时非常有用，比如根据设备的类型（移动视图或桌面视图）来显示不同的布局。

类型

三元运算符：condition ? exprIfTrue : exprIfFalse
逻辑与运算符：condition && <Component />
逻辑或运算符：condition || <Component />
使用 if 语句
使用 switch 语句

应用场景

在 React 中，条件渲染常用于以下场景：

根据用户权限显示不同的内容。
根据设备类型显示不同的布局（移动视图或桌面视图）。
根据数据的状态显示不同的 UI 元素。

示例代码

以下是一个简单的示例，展示如何根据设备的宽度来决定渲染移动视图还是桌面视图：

import React from 'react';

const MobileView = () => <div>Mobile View</div>;
const DesktopView = () => <div>Desktop View</div>;

const ResponsiveComponent = () => {
  const isMobile = window.innerWidth <= 768;

  return (
    <div>
      {isMobile ? <MobileView /> : <DesktopView />}
    </div>
  );
};

export default ResponsiveComponent;

常见问题及解决方法

问题：为什么我的条件渲染没有生效？

原因：

条件判断错误：检查你的条件表达式是否正确。
组件渲染顺序：确保在组件挂载后进行条件判断。
窗口大小变化：如果依赖窗口大小，需要监听窗口大小变化事件。

解决方法：

使用 console.log 打印条件表达式的值，确保其正确性。
使用 useEffect 钩子来监听窗口大小变化。

import React, { useEffect, useState } from 'react';

const ResponsiveComponent = () => {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div>
      {isMobile ? <MobileView /> : <DesktopView />}
    </div>
  );
};

export default ResponsiveComponent;

参考链接

通过以上内容，你应该能够理解 React 中条件渲染的基础概念、优势、类型、应用场景以及常见问题的解决方法。

React condtional (移动视图和桌面视图)问题

、、、

当这段代码加载到移动视图时，它会在几毫秒内显示桌面视图，之后它会显示一个移动视图。有人能改正我的代码吗？提前谢谢。class Header extends React.Component { super(props); this.state

浏览 10提问于2020-07-28得票数 0

回答已采纳

1回答

React Native和Spring Boot

、、

我正在开发一个应用程序，它有一个桌面视图和一个移动视图，用于Spring Boot应用程序的前端。桌面视图是react应用程序，移动版本是react原生应用程序。我将桌面应用程序嵌入到Thymeleaf中以加载应用程序。我知道这是怎么回事。我现在遇到了与React Native应用程序相关的问题。我的问题是，当React Nat

浏览 16提问于2019-02-15得票数 1

1回答

基于设备的呈现反应视图

为了提高性能，我需要根据react {而不是本机react}中的设备呈现视图。除了媒体查询之外，我们还有任何基于设备的标记呈现方法。请注意，我需要这个来响

浏览 1提问于2017-02-01得票数 0

1回答

浏览器移动视图中的Google地图缩放控件

、、

我在我的react应用程序中使用谷歌地图，缩放控件在桌面浏览器视图中很好，但当我进入浏览器移动视图时，如果我单击缩放控件(无论是+还是-)，这些控件下面的地图似乎也被单击了。在我的桌面和移动视图代码中，唯一的区别是缩放控件的位置，如下所示： position: zoomButtonLocation === 'top_left'maps.ControlPosition.

浏览 2提问于2020-09-19得票数 0

2回答

在我的react应用程序上，我需要将移动用户重定向到移动站点。当有人访问我的url时，例如：example.com，如果他们在手机上，我需要将url重定向到mobile.example.com。我还没有找到像这样一个有移动视图和桌面视图的react应用程序的文件结构的好文章。我还需要在本地主机上测试它。我正在使用react-router-dom进行路由，也找不到任何关于将基本the更改为移动的内容。

浏览 0提问于2021-10-13得票数 3

1回答

Spring chaning LiteDeviceDelegatingViewResolver和InternalResourceViewResolver

、、

我在使用Spring Mobile1.1.2和Spring MVC时遇到了问题。我遇到的问题是，在应用程序中，我有桌面的所有视图，对于一些桌面，我有移动替代。如果桌面视图和移动视图都存在，则一切正常。在桌面上我看到的是桌面版，在移动端我看到的是移动版。问题是当移动视图

浏览 2提问于2014-07-18得票数 2

2回答

React组件在移动设备和浏览器上不基于屏幕宽度显示

、

> </React.Fragment> }</React.Fragment> } render() { ) } 我的问题是，在移动设备上，它最初应该显

浏览 27提问于2021-07-26得票数 1

1回答

Twilio视频:如何在桌面上渲染移动布局

、

我正在使用Twilio Video React应用程序，用于我的视频应用程序。Twilio video基于设备以两种视图呈现视频:桌面视图和移动视图。由于我的桌面应用程序的空间限制，我想在桌面上呈现类似于移动设备的视频，这可能吗？有没有可以设置的变量来允许我这样做？基本上，我希望Twilio video认为我是在手机上运行应用程序。

浏览 25提问于2020-08-26得票数 0

2回答