Как отобразить указанное c количество делений в зависимости от ширины в реакции. js? - PullRequest
Новая
       23

Как отобразить указанное c количество делений в зависимости от ширины в реакции. js?

0 голосов
/ 24 апреля 2020

Я работаю над компонентом, который является своего рода галереей со стрелками, чтобы «скользить» по нему. По умолчанию по умолчанию отображаются шесть погружений, каждое из которых sh является изображением с торговой маркой. Я хотел бы, чтобы это выглядело по-разному в зависимости от ширины экрана. На больших рабочих столах должно отображаться 6 делений (или изображений), 4 на средних и 2 на маленьких. Я хотел бы подход, отличный от медиа-запроса. Я новичок, чтобы реагировать. 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;

1 Ответ

0 голосов
/ 24 апреля 2020

Вы можете создать переменную состояния для хранения устройства (рабочий стол, мобильный телефон, планшет).

И затем вы можете добавить EventListener для изменения размера окна и назначить имя устройства состоянию на основе внутренней ширины.

Теперь, основываясь на имени устройства, вы можете указать класс для вашего 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");
})

}
...