Lassen Sie uns üben, indem wir eine Kartenkomponente erstellen, die aus drei Komponenten besteht. Wir möchten verschiedene Komponenten nutzen und Stile anwenden, um sie optisch ansprechend zu gestalten. Wir werden Schritt für Schritt vorgehen, um dies zu erreichen.

Bevor wir beginnen, lassen Sie uns die Funktionalität der speziellen Eigenschaft children erkunden, die es uns ermöglicht, Komponenten, Elemente oder Text als Kindelemente zu übergeben. So funktioniert es:

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

Die Container-Komponente enthält eine children-Eigenschaft, die die Notification- und Message-Komponenten enthalten wird. Jeder Inhalt, der zwischen den öffnenden und schließenden Tags der Container-Komponente platziert wird, wird als deren Kinder behandelt.

Die Container-Komponente hat den folgenden Code:

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

Hinweis

Einfache Eigenschaften sind explizit definiert und werden innerhalb einer Komponente mit ihren spezifischen Namen aufgerufen. Andererseits ermöglicht uns die children-Eigenschaft, Komponenten, Elemente oder Text als Kinder an eine Komponente zu übergeben, ohne explizit einen Eigenschaftsnamen zu definieren. Sie repräsentiert den Inhalt zwischen den öffnenden und schließenden Tags der Komponente.

Wir können beginnen.

Schritt 1

Wir erstellen alle notwendigen Komponenten: Container, UserImage und UserInfo. Lassen Sie uns die gesamte App aufbauen, indem wir diese Komponenten in die App-Komponente integrieren.

Beispiel:

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

Schritt 2

Stellen Sie sicher, dass alle wesentlichen Klassennamen mit dem className-Attribut zu den Elementen hinzugefügt werden.

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

Schritt 3

Lassen Sie uns die CSS-Datei in die Datei importieren, die alle Komponenten enthält. Wir machen es am Anfang der Datei.

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

Schritt 4

Zuletzt haben wir die Freiheit, beliebige Stile nach unseren Vorlieben anzuwenden.

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

Vollständiger App-Code: