J'essaie des composants fonctionnels avec des crochets de réaction 16.7, il y a une erreur
src/components/Footer/index.js
function Footer() {
const [selectedTab, setSelectedTab] = useState('redTab');
const [hidden, setHidden] = useState(false);
const [fullScreen, setFullScreen] = useState(false);
//...
}
package.json
Que devrais-je faire?
Assurez-vous de mettre à niveau react-dom
vers 16.7.0-alpha.0
également.
package.json
{
"dependencies": {
"react": "16.7.0-alpha.0",
"react-dom" "16.7.0-alpha.0",
...
},
...
}
Il se peut également que vous n'ayez remplacé la version dans package.json
sans installer la nouvelle version. Vous pouvez supprimer node_modules
et installer à nouveau .
npm ci
Exemple
const { useState } = React;
function Footer() {
const [selectedTab, setSelectedTab] = useState('redTab');
const [hidden, setHidden] = useState(false);
const [fullScreen, setFullScreen] = useState(false);
return (
<div>
<button onClick={() => setSelectedTab('blueTab')}>{selectedTab}</button>
<button onClick={() => setHidden(isHidden => !isHidden)}>
{hidden ? 'hidden' : 'visible'}
</button>
<button onClick={() => setFullScreen(isFullScreen => !isFullScreen)}>
{fullScreen ? 'fullscreen' : 'windowed'}
</button>
</div>
);
}
ReactDOM.render(
<Footer />,
document.getElementById('root')
);
<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="root"></div>
Les versions de React et de Rea-dom sont différentes dans votre package.json
Donc, pour résoudre le problème, vous devez mettre à niveau react-dom vers la même version que react
Exécuter ci-dessous la commande. Ceci installera la version 16.7.0-alpha.0 de react-dom
npm i -s [email protected]
Après l’installation de react-dom re, regroupez le projet.
J'ai installé les deux réagissent et réagissent-alpha alpha, comme vous pouvez voir dans ce paquet.json .
L'utilisation, dans le même projet, du code suivant fonctionnerait parfaitement:
import React, { useRef, useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const [icount, setICount] = useState(0);
const {current: increment} = useRef(1 + Math.floor(Math.random() * 5));
return (
<div>
Count {count}<br />
Increment {increment}<br />
<button onClick={() => {
setCount(count + 1);
setICount(icount + increment);
}} clicks={count}>
Current {icount}
</button>
</div>
);
}
export default Counter;
Cette exportation peut être testée/utilisée via une application de base telle que:
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';
ReactDOM.render(<Counter />, document.body);
J'espère que cet exemple clarifie/résout vos problèmes.
Meilleures salutations