logo

So übergeben Sie Komponenten als Requisiten in React

Übersicht

Eine der Möglichkeiten, unsere Komponenten wiederverwendbar zu machen, besteht darin, Requisiten zu übergeben, unabhängig davon, ob es sich um Zeichenfolgen, ganze Zahlen, boolesche Werte, Objekte, Arrays usw. handelt. Aber irgendwann müssen Sie eine Komponente wiederverwenden und das Einzige, was Sie ändern müssen, ist zum Beispiel der Header.

Die beliebteste Methode ist die Verwendung von untergeordneten Elementen, dh Sie haben eine übergeordnete Komponente mit einem öffnenden und einem schließenden Tag. Wenn Sie nur eine Komponente ändern müssen, brauchen Sie nichts weiter zu tun, aber wenn Sie mehr als eine Komponente bestehen müssen, ist die Situation anders.

Dafür wäre die ideale Situation, eine übergeordnete Komponente mit einem selbstschließenden Tag zu haben, das die untergeordneten Komponenten rendert, wenn sie in den Requisiten übergeben werden.

Heutiges Beispiel

Heute werden wir drei völlig unterschiedliche Schaltflächen erstellen, eine mit einem Symbol auf der linken Seite, eine ohne Symbol und eine mit einem Symbol auf der rechten Seite.

Wir werden jedoch dieselbe Komponente wiederverwenden und durch die Requisiten die Positionierung des Symbols und die Hintergrundfarbe der Schaltfläche ändern.

Außerdem wird das Symbol, wie Sie vielleicht schon bemerkt haben, als Prop übergeben.

Lass uns programmieren

Lassen Sie uns die folgenden Abhängigkeiten installieren:

npm install classnames react-icons

Das gesamte Komponenten-Styling in dieser Anwendung wird mit CSS-Modulen durchgeführt, und um sie durch Bedingungen zu verbinden, werde ich die Klassennamen-Abhängigkeit verwenden.

Beginnen wir zunächst mit der Arbeit an unserer Komponente, die wiederverwendet wird. Beginnend mit dem Design des Buttons hat der Button zwei Hintergrundfarben (die primäre und die normale), zusätzlich ändern wir die Position der Button-Elemente, dafür machen wir eine einfache Umkehrung der Flex-Richtung, um die umzukehren Reihenfolge der Elemente. Zu guter Letzt fügen wir dem Symbol entsprechend seiner Platzierung einen Abstand hinzu. 

/* @src/components/Button.module.css */

.button {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20px 0px;
  cursor: pointer;
  font-weight: 500;
  padding: 13px 25px;
  border-radius: 15px;
  font-size: 1rem;
  border: none;
  color: #fff;
  transition: all 0.25s ease;
}

.button:hover {
  transform: translateY(-5px);
}

.reverse {
  flex-direction: row-reverse;
}

.primaryBG {
  background: #185adb;
}

.primaryBG:hover {
  box-shadow: 0 10px 20px -10px rgba(24, 90, 219, 0.6);
}

.normalBG {
  background: #363449;
}

.normalBG:hover {
  box-shadow: 0 10px 20px -10px rgba(54, 52, 73, 0.6);
}

.icon {
  margin-bottom: -5px;
  margin-right: 6px;
  margin-left: 0px;
}

.iconRight {
  margin-right: 0px;
  margin-left: 6px;
}

Jetzt können wir mit der Arbeit an unserer Webkomponente beginnen. 

// @src/components/Button.jsx

import React from "react";
import classNames from "classnames";

import styles from "./Button.module.css";

const Button = () => {
  return (
    // ...
  );
};

export default Button;

Lassen Sie uns nun die Requisiten definieren, die wir in unserer Komponente erhalten:

  • Symbol - wird die Icon-Komponente sein;
  • hatIconRight - wird ein boolescher Wert sein, um zu wissen, ob das Symbol auf der rechten Seite platziert wird;
  • Titel - wird eine Zeichenfolge mit dem Wert des Inhalts sein, den wir in der Schaltfläche haben möchten;
  • onClick - ist die Funktion, die beim On-Click-Ereignis ausgelöst werden soll;
  • primär - ist ein boolescher Wert, der angibt, dass die Hintergrundfarbe der Schaltfläche die Primärfarbe sein soll;

Auf unserer Schaltfläche wenden wir zuerst die Basisstile an und erstellen dann zwei Bedingungen. Wenn die Komponente die primäre erhält prop hat die Schaltfläche die Grundfarbe als Hintergrundfarbe, ansonsten die normale Farbe.

Die zweite Bedingung ist die Platzierung der Elemente des Buttons, wenn das Prop hasIconRight ist empfangen wird, wird die Platzierung der Elemente umgekehrt (in diesem Fall springt die Schaltfläche auf die rechte Seite). 

// @src/components/Button.jsx

import React from "react";
import classNames from "classnames";

import styles from "./Button.module.css";

const Button = ({ icon, hasIconRight, title, onClick, primary }) => {
  return (
    <button
      className={classNames([
        styles.button,
        primary ? styles.primaryBG : styles.normalBG,
        hasIconRight && styles.reverse,
      ])}
    >
     // ...
    </button>
  );
};

export default Button;

Kommen wir nun zum Icon , wenn es in den Requisiten übergeben wird, werden wir es rendern, sonst wollen wir nicht, dass es Platz im Dom einnimmt. Danach übergeben wir die Basisstile an den Icon-Wrapper und wir haben auch eine Bedingung, wenn wir das hasIconRight erhalten prop möchten wir, dass der ideale Abstand angewendet wird. 

// @src/components/Button.jsx

import React from "react";
import classNames from "classnames";

import styles from "./Button.module.css";

const Button = ({ icon, hasIconRight, title, onClick, primary }) => {
  return (
    <button
      className={classNames([
        styles.button,
        primary ? styles.primaryBG : styles.normalBG,
        hasIconRight && styles.reverse,
      ])}
    >
      {!!icon && (
        <span
          className={classNames([
            styles.icon,
            hasIconRight && styles.iconRight,
          ])}
        >
          {icon}
        </span>
      )}
      // ...
    </button>
  );
};

export default Button;

Zum Schluss fügen Sie einfach den Titel hinzu , sodass die Schaltfläche einen Textinhalt hat und wir den onClick übergeben prop zum Tag der Schaltfläche. 

// @src/components/Button.jsx

import React from "react";
import classNames from "classnames";

import styles from "./Button.module.css";

const Button = ({ icon, hasIconRight, title, onClick, primary }) => {
  return (
    <button
      className={classNames([
        styles.button,
        primary ? styles.primaryBG : styles.normalBG,
        hasIconRight && styles.reverse,
      ])}
      onClick={onClick}
    >
      {!!icon && (
        <span
          className={classNames([
            styles.icon,
            hasIconRight && styles.iconRight,
          ])}
        >
          {icon}
        </span>
      )}
      <span>{title}</span>
    </button>
  );
};

export default Button;

Jetzt können wir mit der Arbeit an unserer App.jsx beginnen. Ich teile die Stile mit Ihnen:

/* @src/App.module.css */

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 600px;
}

Nehmen wir nun an, dies ist Ihre Komponente:

// @src/App.jsx

import React, { useCallback } from "react";
import { HiOutlineSpeakerphone } from "react-icons/hi";
import { BiRightArrowAlt } from "react-icons/bi";

import styles from "./App.module.css";
import Button from "./components/Button";

const App = () => {
  const fn = useCallback((message) => {
    console.log(message);
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.section}>
        // ...
      </div>
    </div>
  );
};

export default App;

Wie Sie sehen können, haben wir bereits unsere Symbole ausgewählt und unsere Button-Komponente bereits importiert. Es müssen nur noch die drei Schaltflächen erstellt werden, die in der Einleitung des Artikels definiert wurden. 

// @src/App.jsx

import React, { useCallback } from "react";
import { HiOutlineSpeakerphone } from "react-icons/hi";
import { BiRightArrowAlt } from "react-icons/bi";

import styles from "./App.module.css";
import Button from "./components/Button";

const App = () => {
  const fn = useCallback((message) => {
    console.log(message);
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.section}>
        <Button
          icon={<HiOutlineSpeakerphone />}
          title="Let us know"
          onClick={() => fn("Clicked 'Let us know' button")}
        />
        <Button
          title="Get Started"
          onClick={() => fn("Clicked 'Get Started' button")}
          primary
        />
        <Button
          icon={<BiRightArrowAlt />}
          title="Learn more"
          onClick={() => fn("Clicked 'Learn more' button")}
          hasIconRight
        />
      </div>
    </div>
  );
};

export default App;

Sie sollten ein ähnliches Ergebnis wie dieses erhalten:

Fazit

Wie immer hoffe ich, dass Sie es interessant fanden. Wenn Sie Fehler in diesem Artikel bemerkt haben, erwähnen Sie diese bitte in den Kommentaren. 🧑🏻‍💻

Hoffe du hast einen schönen Tag! 🔫