Dev Faq
0
votes

Appels de crochets non valides dans React.js

import React, {Component, useState, useEffect} from 'react';
import {connect} from 'react-redux';
import BigHeader from './bigHeader';
import SmallHeader from './smallHeader';

function isSmall() {
    if(this.windowWidth < 1307){
        return true;
      }
      return false;
}

const [windowWidth, setWindowWidth] = useState(window.innerWidth);

function determineWidth() {
    const width = window.innerWidth;
    setWindowWidth(width);
    isSmall(width);
}

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

    return function() {
        window.removeEventListener("resize", determineWidth);
    }
})
class Header  extends Component {

    render() {
        return this.isSmall() ? <SmallHeader/> : <BigHeader/> 
    }
}

// export default connect(mapStateToProps, page);
export default Header;
I am getting an error from this line const [windowWidth, setWindowWidth] = useState(window.innerWidth);I am trying to return a mobile/smaller header when the screen is < 1307 and return a different header when it is above that.
2 commentaires

Les crochets doivent généralement faire partie d'une composante fonctionnelle

Un crochet doit être appelé par un composant fonctionnel.

4 Réponses :

0
votes

Vous ne pouvez pas utiliser les crochets en dehors de la fonction.

pouvez-vous s'il vous plaît déplacer le code const [windowwidth, setwindowwidth] = usestate (fenêtre.innerwidth); dans la fonction puis l'essayer.

0 commentaires
0
votes

Essayez d'utiliser des dimensions à partir de React Native, ce code devrait fonctionner: Vous pouvez également mettre à jour la valeur WindowWidth chaque fois que vous appelez la fonction ISSMALL (): 

import { Dimensions } from 'react-native'
const windowWidth = Dimensions.get('window').width;
const windowheight = Dimensions.get('window').height;

function isSmall() {
if(this.windowWidth < 1307){
    return true;
  }
  return false;
}

class Header  extends Component {

render() {
    return this.isSmall() ? <SmallHeader/> : <BigHeader/> 
    }
}

// export default connect(mapStateToProps, page);
export default Header;

0 commentaires
0
votes

Selon React Documentation: crochets , crochets ne peut être utilisé que dans un composant fonctionnel

grossièrement comme celui-ci xxx

0 commentaires
1
votes

Si vous souhaitez utiliser des crochets (y compris des crochets personnalisés), vous devez les utiliser à partir de composants fonctionnels. Voici votre code avec des crochets personnalisés et une en-tête est un composant fonctionnel au lieu d'une classe: 

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import BigHeader from './bigHeader';
import SmallHeader from './smallHeader';

const useWindowWidth = () => {
  function determineWidth() {
    const width = window.innerWidth;
    setWindowWidth(width);
  }
  const [windowWidth, setWindowWidth] = useState(
    window.innerWidth
  );
  useEffect(() => {
    window.addEventListener('resize', determineWidth);

    return function() {
      window.removeEventListener('resize', determineWidth);
    };
  },[]);
  return windowWidth;
};

function useIsSmall() {
  const windowWidth = useWindowWidth();
  if (windowWidth < 1307) {
    return true;
  }
  return false;
}

function Header(props) {
  const isSmall = useIsSmall();
  return isSmall ? <SmallHeader /> : <BigHeader />;
}

// export default connect(mapStateToProps, page);
export default Header;

0 commentaires

Articles qui pourrait vous intéresser :

Mon application create-react ne parvient pas à se compiler en raison d'une erreur ESLint
Erreur: Node Sass version 5.0.0 est incompatible avec ^ 4.0.0
La réinitialisation de React-hook-form fonctionne correctement, les champs de saisie ne se vident toujours pas après l'envoi
Changer le format numérique du champ d'entrée dans le mode d'édition de ligne de table d'Antd?