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

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;
  }
}

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;

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;