react.js如何根据宽度显示特定数量的div？

Question

我正在开发一个组件，它是一种带有指向 "slide" 的箭头的画廊。基本上默认情况下它会显示六次潜水，每次潜水都是带有品牌名称的图像。我希望它根据屏幕宽度看起来有所不同。它应该在大型桌面上显示 6 个 div（或图像），在中型桌面上显示 4 个，在小型桌面上显示 2 个。我想要一种不同于媒体查询的方法。我是 react.js 的新手，所以任何提示和帮助都将不胜感激。

import React from 'react';
import PropTypes from 'prop-types';

import BrandsBox from '../../common/BrandBox/BrandBox';

import styles from './Brands.module.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';

class Brands extends React.Component {
  state = {
    activeBrands: 6,
    startBrandDisplay: 0,
  };
 
  render() {
    const { brands } = this.props;
    const { activeBrands } = this.state;
    const brandsToDisplay = brands.slice(this.state.startBrandDisplayy, activeBrands+this.state.startBrandDisplay);

    return (
      <div className={'container'}>
        <div className={styles.componentContainer}>
          <div
            onClick={() => { 
              this.setState({
                ...this.state,
                startBrandDisplay: this.state.startBrandDisplay-1
              })
            }}
    
            className={styles.swipe}>

            <FontAwesomeIcon icon={faChevronLeft} className={styles.icon} />
        
          </div>
          { brandsToDisplay.map(brands => (
            <div id ={brands.id} key={brands.id} className={styles.brandContainer}>
              <BrandsBox {...brands} />
            </div>
          ))}

          <div 
            onClick={() => { 
              this.setState({
                ...this.state,
                startBrandDisplay: this.state.startBrandDisplay+1
              })
            }}
            className={styles.swipe}>
            <FontAwesomeIcon icon={faChevronRight} className={styles.icon} />
          </div>


        </div>
      </div>
    );
  }
}
Brands.propTypes = {
  brands: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number,
      name: PropTypes.string,
      image: PropTypes.string,
    })
  ),
};

export default Brands;

Answer 1

您可以创建一个状态变量来存储设备（台式机、手机、平板电脑）。

然后你可以为 window 调整大小添加一个 EventListener，并根据内部宽度将设备名称分配给 state。

现在，您可以根据设备名称将 class 指定为 Parent Div。

function App() {

const [device, setDevice] = useState("")

function handleResize() {

  const width = window.innerWidth

// Now check here what is the width and assign the device name 

}

useEffect(() => {
window.addEventListener("resize", "handleResize");
})

}

react.js如何根据宽度显示特定数量的div？

How to display specific number of divs depending on width in react.js?

javascript

slider

gallery

reactjs