Poniżej kilka przykładowych komponentów
Najprostszy przykład komponentu
function Title() {
return <h1>Przykładowy komponent</h1>;
}
export default Title;
// Przykład wywołania:
// <Title />
//
// Wynik:
// <h1>Przykładowy komponent</h1>Komponent z „propsem”
function Subtitle({ text }) {
return <h2>{text}</h2>;
}
export default Subtitle;
// Przykład wywołania:
// <Subtitle text="Wprowadzenie" />
//
// Wynik:
// <h2>Wprowadzenie</h2>Komponent z dwoma propsami
function UserInfo({ name, role }) {
return (
<div>
<p>Użytkownik: {name}</p>
<p>Rola: {role}</p>
</div>
);
}
export default UserInfo;
// Przykład wywołania:
// <UserInfo name="Anna" role="Administrator" />
//
// Wynik:
// <div>
// <p>Użytkownik: Anna</p>
// <p>Rola: Administrator</p>
// </div>Z warunkiem
Jeśli nie lubisz cudowania możesz przerobić ten warunek na zwykłego if
function Alert({ message, type }) {
return (
<div>
<strong>{type === "error" ? "Błąd: " : "Info: "}</strong>
{message}
</div>
);
}
export default Alert;
// Przykład wywołania:
// <Alert type="error" message="Coś poszło nie tak" />
//
// Wynik:
// <div>
// <strong>Błąd: </strong>
// Coś poszło nie tak
// </div>Komponent z kolorowymi ramkami – inaczej zapisany
function Box(props) {
return (
<div className="box-container" style={{ borderColor: props.borderColor }}>
"{props.text}" <br />ma {props.text.length} znaków
</div>
);
}
// bez funkcji strzałkowej
// bez przypisania funkcji do stałej (const)
// destrukturyzacji propsów w parametrzePierwotna wersja była taka:
const Box = ({ borderColor, text }) => {
return (
<div className="box-container" style={{ borderColor }}>
"{text}" <br />ma {text.length} znaków
</div>
);
};
Twój komentarz