Laten we oefenen door een kaartcomponent te maken die uit drie componenten bestaat. We streven ernaar verschillende componenten te gebruiken en stijlen toe te passen om het visueel aantrekkelijk te maken. We zullen stap voor stap te werk gaan om dit te bereiken.

Voordat we beginnen, bekijken we de functionaliteit van de speciale prop genaamd children, waarmee we componenten, elementen of tekst als kindelementen kunnen doorgeven. Zo werkt het:

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

De Container-component bevat een children-prop, die de Notification- en Message-componenten zal bevatten. Alle inhoud die tussen de openings- en sluitingstags van de Container-component wordt geplaatst, wordt als zijn kinderen behandeld.

De Container-component heeft de volgende code:

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

Opmerking

Eenvoudige props worden expliciet gedefinieerd en benaderd met hun specifieke namen binnen een component. De children-prop daarentegen stelt ons in staat componenten, elementen of tekst als kinderen aan een component door te geven zonder expliciet een prop-naam te definiëren. Het vertegenwoordigt de inhoud tussen de openings- en sluitingstags van de component.

We kunnen beginnen.

Stap 1

We maken alle benodigde componenten aan: Container, UserImage en UserInfo. Laten we de volledige app bouwen door deze componenten in de App-component op te nemen.

Voorbeeld:

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

Stap 2

Zorg ervoor dat alle essentiële class-namen zijn toegevoegd aan de elementen met behulp van het className attribuut.

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

Stap 3

Importeer het CSS-bestand in het bestand dat alle componenten bevat. Dit gebeurt bovenaan het bestand.

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

Stap 4

Tot slot hebben we de vrijheid om elke gewenste stijl toe te passen.

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

Volledige app-code: