La oss øve ved å lage en kortkomponent bestående av tre komponenter. Målet er å bruke ulike komponenter og anvende stiler for å gjøre den visuelt tiltalende. Vi går frem steg for steg for å oppnå dette.

Før vi begynner, skal vi se nærmere på funksjonaliteten til den spesielle propen children, som gjør det mulig å sende komponenter, elementer eller tekst som barneelementer. Slik fungerer det:

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

Container-komponenten inkluderer en children-prop, som vil inneholde Notification- og Message-komponentene. Alt innhold plassert mellom åpnings- og lukkingsmerkene til Container-komponenten vil bli behandlet som dens children.

Container-komponenten har følgende kode:

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

Merk

Enkle props er eksplisitt definert og aksesseres ved å bruke deres spesifikke navn i en komponent. children-propen gjør det derimot mulig å sende komponenter, elementer eller tekst som children til en komponent uten å eksplisitt definere et prop-navn. Den representerer innholdet mellom åpnings- og lukkingsmerkene til komponenten.

Vi kan starte.

Steg 1

Vi oppretter alle nødvendige komponenter: Container, UserImage og UserInfo. Hele applikasjonen bygges ved å inkludere disse komponentene 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>
);

Steg 2

Sørg for at alle nødvendige klassenavn er lagt til elementene ved å bruke className-attributtet.

// `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>
);

Steg 3

Importer CSS-filen i filen som inneholder alle komponentene. Dette gjøres øverst i filen.

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

Steg 4

Til slutt har vi frihet til å bruke hvilke som helst stiler etter egne preferanser.

/* 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;
}

Fullstendig app-kode: