Funktionel komponent er en måde at oprette komponenter i en React-applikation. React.js Functional Components hjælper med at skabe UI-komponenter på en funktionel og mere kortfattet måde. I denne artikel vil vi lære om funktionelle komponenter i React, forskellige måder at kalde den funktionelle komponent på, og også lære at oprette de funktionelle komponenter. Vi vil også demonstrere brugen af kroge i funktionelle komponenter
Indholdsfortegnelse
- Funktionelle komponenter i React:
- Måder at kalde den funktionelle komponent:
- Problem med at bruge funktionelle komponenter
- Fordel ved at bruge kroge i funktionelle komponenter
Funktionelle komponenter i React:
ReactJS Funktionelle komponenter er nogle af de mere almindelige komponenter, der vil støde på, mens du arbejder i React. Disse er simpelthen JavaScript-funktioner. Vi kan oprette en funktionel komponent i React ved at skrive en JavaScript-funktion. Disse funktioner kan muligvis modtage data som parametre. I de funktionelle komponenter er returværdien JSX-koden, der skal gengives til DOM-træet.
Måder at kalde den funktionelle komponent:
Vi kan kalde funktionerne i javaScript på andre måder som følger:
1. Kald funktionen ved at bruge navnet på funktionen efterfulgt af parenteserne.
// Example of Calling the function with function name followed by Parentheses function Parentheses() { return (; }; const PropsExample = () =>{ // const [change, setChange] = useState(true); const [ændring, sætChange] = useState(false); return ( setChange(!change)}> Klik her! {ændre ? ( 'Velkommen til techcodeview.com' /> ) : ( 'En datalogiportal for nørder' /> )} ); }; eksport standard PropsExample;Trin for at køre programmet: Åbn terminalen og skriv følgende kommando. npm start Output: Åbn browseren og vores projekt vises i URL'en http://localhost:3000/>