如何根据屏幕大小在React中有条件地显示列表项

在React中，根据屏幕大小有条件地显示列表项可以通过多种方式实现，以下是几种常见的方法：

1. 使用CSS媒体查询

CSS媒体查询可以根据屏幕大小应用不同的样式。你可以在组件中使用内联样式或CSS模块来实现这一点。

import React from 'react';
import './ItemList.css';

const ItemList = ({ items }) => {
  return (
    <ul className="item-list">
      {items.map((item, index) => (
        <li key={index} className="item">
          {item}
        </li>
      ))}
    </ul>
  );
};

export default ItemList;

/* ItemList.css */
.item-list {
  list-style: none;
  padding: 0;
}

.item {
  display: block;
}

@media (max-width: 600px) {
  .item {
    display: none;
  }
}

2. 使用React Hooks（useState和useEffect）

你可以使用React的useState和useEffect钩子来监听窗口大小的变化，并根据屏幕大小设置状态。

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

const ItemList = ({ items }) => {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 600);

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

    window.addEventListener('resize', handleResize);

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

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index} style={{ display: isMobile ? 'none' : 'block' }}>
          {item}
        </li>
      ))}
    </ul>
  );
};

export default ItemList;

3. 使用第三方库（如react-responsive）

react-responsive是一个用于响应式设计的React库，可以方便地根据屏幕大小显示或隐藏组件。

首先，安装react-responsive：

npm install react-responsive

然后在组件中使用：

import React from 'react';
import { useMediaQuery } from 'react-responsive';

const ItemList = ({ items }) => {
  const isMobile = useMediaQuery({ maxWidth: 600 });

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index} style={{ display: isMobile ? 'none' : 'block' }}>
          {item}
        </li>
      ))}
    </ul>
  );
};

export default ItemList;