Funkční komponenta je jedním ze způsobů, jak vytvořit komponenty v aplikaci React. React.js Functional Components pomáhá vytvářet komponenty uživatelského rozhraní funkčním a výstižnějším způsobem. V tomto článku se seznámíme s funkčními komponentami v Reactu, různými způsoby volání funkční komponenty a také se naučíme, jak vytvořit funkční komponenty. Ukážeme si také použití háčků ve funkčních součástech
Obsah
- Funkční komponenty v Reactu:
- Způsoby volání funkční komponenty:
- Problém s použitím funkčních komponent
- Výhoda použití háčků ve funkčních součástech
Funkční komponenty v Reactu:
ReactJS Funkční komponenty jsou některé z běžnějších komponent, se kterými se při práci v Reactu setkáte. Jsou to prostě funkce JavaScriptu. Funkční komponentu v Reactu můžeme vytvořit napsáním funkce JavaScriptu. Tyto funkce mohou nebo nemusí přijímat data jako parametry. Ve funkčních komponentách je návratovou hodnotou kód JSX, který se má vykreslit do stromu DOM.
Způsoby volání funkční komponenty:
Funkce v JavaScriptu můžeme volat i jinak, a to takto:
1. Zavolejte funkci pomocí názvu funkce následovaného závorkami.
// Example of Calling the function with function name followed by Parentheses function Parentheses() { return (; }; const PropsExample = () =>{ // const [change, setChange] = useState(true); const [change, setChange] = useState(false); return ( setChange(!change)}> Klikněte sem! {změnit ? ( 'Vítejte na techcodeview.com' /> ) : ( 'Portál informatiky pro geeky' /> )} ); }; exportovat výchozí PropsExample;Krok ke spuštění aplikace: Otevřete terminál a zadejte následující příkaz. npm start Výstup: Otevřete prohlížeč a náš projekt se zobrazí na adrese URL http://localhost:3000/>