web-dev-qa-db-fra.com

Comment utiliser les nouveaux crochets de fonctionnalités dans React?

Je viens de lire sur les nouveaux hooks de fonctionnalité de React . Lire sur les hooks mais je ne peux pas l'utiliser. cela me donne une erreur.

J'utilise actuellement la version 16.6.0

Enfin, j'ai compris les crochets.

import React, {useState} from 'react';

const Fun = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );}

 export default Fun;

J'ai importé comme Fun et utilisé comme dans mon fichier app.js

L'erreur que j'ai faite est que je n'ai pas installé React v16.7.0-alpha donc j'ai installé en utilisant npm add react @ next react-dom @ next.

Merci

javascriptreactjsreact-hooks
16
Ram

MODIFIER:

Les crochets sont publiés dans le cadre de la version 16.8.0 et vous pouvez l'utiliser en installant React et React-dom 16.8.0

courir

yarn install [email protected] [email protected]

à installer. Afin de mettre à niveau réagir à la dernière version

yarn upgrade react react-dom

Les crochets ne sont pas présents dans la version 16.6.0, mais sont une proposition pour la version 16.7.0. Vous pouvez cependant utiliser 16.7.0-alpha.0 version alpha de React pour les tester

Pour utiliser cette installation, installez la version ci-dessus en utilisant

yarn add react@next react-dom@next

Assurez-vous que vous installez à la fois react et react-dom ou bien vous obtiendrez un avertissement comme

TypeError: L'objet (…) n'est pas une erreur de fonction lors de l'utilisation de hooks de réaction (alpha)

19
Shubham Khatri

Vous devez utiliser la version 16.7.0-alpha.0 (ou supérieur) pour react et react-dom pour essayer les crochets. Utilisez l'extrait de code suivant pour référence:

function App() {
  const [name, setName] = React.useState('Mary');
  return (
    <div>Name: 
      <input value={name} 
        onChange={(event) => setName(event.target.value)}
      />
      <p>{name}</p>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>
3
Yangshun Tay