Lad os øve os ved at oprette en kortkomponent bestående af tre komponenter. Målet er at anvende forskellige komponenter og tilføje styles for at gøre den visuelt tiltalende. Vi gennemgår processen trin for trin for at opnå dette.

Før vi begynder, skal vi undersøge funktionaliteten af den specielle prop kaldet children, som gør det muligt at videregive komponenter, elementer eller tekst som underordnede elementer. Sådan fungerer det:

const App = () => (
  <Container>
    <Notification />
    <Message />
  </Container>
);

Container-komponenten indeholder en children-prop, som vil indeholde Notification- og Message-komponenterne. Alt indhold placeret mellem åbnings- og lukningstagen for Container-komponenten behandles som dens children.

Container-komponenten har følgende kode:

const Container = (props) => (
  <div>{props.children}</div>
);

Bemærk

Enkle props defineres eksplicit og tilgås ved at bruge deres specifikke navne i en komponent. children-proppen gør det derimod muligt at videregive komponenter, elementer eller tekst som children til en komponent uden eksplicit at definere et prop-navn. Den repræsenterer indholdet mellem åbnings- og lukningstagen for komponenten.

Vi kan begynde.

Trin 1

Vi opretter alle nødvendige komponenter: Container, UserImage og UserInfo. Hele appen bygges ved at inkludere disse komponenter i App-komponenten.

Eksempel:

// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => (
  <div>{props.children}</div>
);

// `UserImage` component to display user image
const UserImage = () => (
  <img
    className="image"
    src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
    alt="user"
    width={200}
  />
);

// `UserInfo` component to display user information
const UserInfo = (props) => (
  <div>
    <p>
      <span>Name:</span> {props.name}
    </p>
    <p>
      <span>Age:</span> {props.age}
    </p>
    <p>
      <span>Occupation:</span> {props.occupation}
    </p>
  </div>
);

// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
  <Container>
    <UserImage />
    <UserInfo name="Michelle" age="36 years" occupation="Accountant" />
  </Container>
);

Trin 2

Sørg for, at alle nødvendige klassenavne tilføjes til elementerne ved hjælp af className-attributten.

// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => <div className="container">{props.children}</div>;

// `UserImage` component to display user image
const UserImage = () => (
  <img
    className="image"
    src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
    alt="user"
    width={200}
  />
);

// `UserInfo` component to display user information
const UserInfo = (props) => (
  <div className="description">
    <p className="text">
      <span className="label">Name:</span> {props.name}
    </p>
    <p className="text">
      <span className="label">Age:</span> {props.age}
    </p>
    <p className="text">
      <span className="label">Occupation:</span> {props.occupation}
    </p>
  </div>
);

// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
  <Container>
    <UserImage />
    <UserInfo name="Michelle" age="36 years" occupation="Accountant" />
  </Container>
);

Trin 3

Importer CSS-filen i den fil, der indeholder alle komponenterne. Dette gøres øverst i filen.

import "./index.css"; // Importing the CSS file

Trin 4

Til sidst har vi friheden til at anvende enhver styling efter vores præferencer.

/* Styling for the `Container` component */
.container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 3px solid #4f5e77;
  border-radius: 10px;
  width: 320px;
  background-color: #ff8a00;
}

/* Styling for the `UserImage` component */
.image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* Styling for the `UserInfo` component text */
.text {
  font-size: 22px;
  color: #bbdefb;
}

/* Styling for the `UserInfo` component label */
.label {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: #4f5e77;
}

Fuld app-kode: