Komponent funkcjonalny to jeden ze sposobów tworzenia komponentów w aplikacji React. Komponenty funkcjonalne React.js pomagają tworzyć komponenty interfejsu użytkownika w funkcjonalny i bardziej zwięzły sposób. W tym artykule dowiemy się o komponentach funkcjonalnych w React, różnych sposobach wywoływania komponentów funkcjonalnych, a także dowiemy się, jak tworzyć komponenty funkcjonalne. Zademonstrujemy także zastosowanie haków w elementach funkcjonalnych
Spis treści
- Komponenty funkcjonalne w React:
- Sposoby wywoływania komponentu funkcjonalnego:
- Problem z wykorzystaniem komponentów funkcjonalnych
- Zaleta stosowania haków w elementach funkcjonalnych
Komponenty funkcjonalne w React:
ReactJS Komponenty funkcjonalne to niektóre z bardziej powszechnych komponentów, które można spotkać podczas pracy w React. Są to po prostu funkcje JavaScript. Komponent funkcjonalny możemy stworzyć w React, pisząc funkcję JavaScript. Funkcje te mogą, ale nie muszą, odbierać dane jako parametry. W komponentach funkcjonalnych wartością zwracaną jest kod JSX do renderowania w drzewie DOM.
Sposoby wywoływania komponentu funkcjonalnego:
Funkcje w JavaScript możemy wywoływać na inne sposoby w następujący sposób:
1. Wywołaj funkcję, podając nazwę funkcji i nawiasy.
// Example of Calling the function with function name followed by Parentheses function Parentheses() { return (; }; const PropsExample = () =>{ // const [zmiana, setChange] = useState(true); const [zmiana, setChange] = useState(false); return ( setChange(!change)}> Kliknij tutaj! {change? ( 'Witamy w techcodeview.com' /> ): ( 'Portal informatyczny dla maniaków' /> )} ); }; eksportuj domyślny przykład rekwizytów;Krok, aby uruchomić aplikację: Otwórz terminal i wpisz następujące polecenie. npm start Dane wyjściowe: Otwórz przeglądarkę, a nasz projekt zostanie wyświetlony pod adresem URL http://localhost:3000/>