ReactJS - modo corretto di gestire un approccio di progettazione reattivo?

Question

ReactJS - modo corretto di gestire un approccio di progettazione reattivo?

#1 da (1 voti)

0

Ho sempre usato CSS e query multimediali quando si tratta di design reattivo. Ho sviluppato in ReactJS per un po ', ma ritengo che il mio approccio al design responsivo sia sciatto. Mi trovo a utilizzare un mix di CSS e Javascript, a seconda della situazione, per determinare le dimensioni dello schermo dell'utente.

Preferirei usare esclusivamente i CSS (SCSS per essere specifici), ma ciò significherebbe usare un sacco di display: none quando non voglio che un particolare elemento appaia per una particolare dimensione dello schermo.

Ad esempio, ho un'app con un cassetto di navigazione sul lato sinistro. Quando il cassetto è aperto, c'è un pulsante all'interno del cassetto, ma voglio solo che il pulsante venga visualizzato all'interno del cassetto su dispositivi di grande schermo. Sui dispositivi mobili, voglio visualizzare il pulsante come un pulsante di azione fluttuante nell'angolo in basso a destra dello schermo. Pertanto, non voglio rendere il pulsante nel cassetto per dispositivi mobili.

Il mio approccio a questo esempio sarebbe come questo:

render() {
    const maxMobileWidth = 1024;
    return (
        <div className="Drawer">
            {
                // don't show button on mobile devices
                (window.innerWidth >= maxMobileWidth)
                ? <MyButton />
                : null
            }
        </div>
    );
}

(e per i dispositivi mobili, avrei eseguito il rendering del pulsante in un altro componente, utilizzando lo stesso metodo per determinare le dimensioni dello schermo per assicurarmi che non venisse visualizzato per schermi di grandi dimensioni).

Questo è bello, perché non aggiunge nulla al DOM sui dispositivi mobili, quindi non è necessario nasconderlo con display: none sul dispositivo mobile.

Ciò che non mi piace è che ho anche quel valore 1024 hardcoded nei miei file SCSS per le query multimediali. Suppongo che non sia un grosso problema, visto che nella mia app ho effettivamente archiviato 'maxMobileWidth' in un file separato che può essere utilizzato da qualsiasi componente, quindi ci sono solo due posti per tenere traccia di questo numero (l'altro ovviamente essendo il file SCSS). Ma questo ovviamente viola il principio ASCIUTTO, quindi mi chiedo se c'è un approccio di progettazione migliore a questa situazione?

javascript dry reactjs css responsive-design

posta sme 29.09.2018 - 13:17

fonte

1 risposta

Leggi altre domande sui tag javascript dry reactjs css responsive-design

Come dovrei separare le classi di analisi dei file? Autenticazione di microservizi tra servizi

score 1 · Answer 1

Potresti usare un approccio che costruisce CSS dal codice JavaScript. Ciò ti consente di definire costanti come maxMobileWidth nei tuoi file JS e di usarle sia in CSS che in JS.

Un esempio (anche se ce ne sono molti altri) è JSS . Questo è ampiamente utilizzato nella Material-UI struttura React, quindi ci sono molti esempi di codice lì. Eccone uno:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import green from '@material-ui/core/colors/green';

const styles = theme => ({
  root: {
    padding: theme.spacing.unit,
    [theme.breakpoints.down('sm')]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
      backgroundColor: green[500],
    },
  },
});

function MediaQuery(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <Typography variant="subheading">{'down(sm): red'}</Typography>
      <Typography variant="subheading">{'up(md): blue'}</Typography>
      <Typography variant="subheading">{'up(lg): green'}</Typography>
    </div>
  );
}

MediaQuery.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(MediaQuery);