So erstellen Sie eine wiederverwendbare Button-Komponente in ReactJS

Schaltflächen sind unbestreitbar wichtige UI-Komponenten jeder Reaktionsanwendung. Schaltflächen können in Szenarien wie dem Absenden eines Formulars oder dem Öffnen einer neuen Seite verwendet werden. Sie können in React.js wiederverwendbare Schaltflächenkomponenten erstellen, die Sie in verschiedenen Abschnitten Ihrer Anwendung verwenden können. Dadurch wird die Pflege Ihrer Anwendung einfacher und Ihr Code bleibt trocken (Don't Repeat Yourself).

Sie müssen zunächst eine neue Datei in Ihrem Komponentenordner mit dem Namen Button.jsx erstellen, um eine wiederverwendbare Schaltflächenkomponente zu erstellen. Der nächste Schritt besteht darin, die Funktion „Button“ zu definieren, die die Parameter text und onClick akzeptiert.

Der Text, der auf der Schaltfläche angezeigt wird, ist in der Textstütze enthalten. Wenn auf die Schaltfläche geklickt wird, wird eine durch die onClick-Requisite angegebene Funktion aufgerufen.

Schließlich müssen Sie ein „Button“-Element zurückgeben, dessen Text-Requisite auf den auf der Schaltfläche anzuzeigenden Text und die onClick-Requisite auf den Handler für das Onclick-Ereignis der Schaltfläche festgelegt ist.

Hier ist ein Beispiel für eine wiederverwendbare Schaltflächenkomponente in React.js:

const Button = ({ text, onClick }) => {
  return (
    <button
      type="button"
      style={{
        margin: 10px,
      }}
      onClick={onClick}
    >
      {text}
    </button>
  );
};

export default Button;

Sobald Sie Ihre wiederverwendbare Schaltflächenkomponente erstellt haben, können Sie sie in jede andere Komponente importieren, in der Sie sie verwenden möchten. Sie könnten beispielsweise eine Komponente namens „MyComponent“ erstellen, die die Schaltflächenkomponente verwendet, um eine Schaltfläche mit dem Text darzustellen „Klick mich!“.

Hier ist ein Beispiel für die Verwendung der Button-Komponente in einer anderen Komponente:

import Button from "../components/Button";

const MyComponent = () => {
  return (
    <div>
      <Button text="Click me!" onClick={() => console.log("Button clicked!")} />
    </div>
  );
};

export default MyComponent;

Dadurch wird eine Schaltfläche mit dem Text „Klick mich!“ gerendert. Wenn auf die Schaltfläche geklickt wird, wird die Funktion console.log aufgerufen und die Meldung „Schaltfläche angeklickt!“ angezeigt. wird in der Konsole protokolliert.

Sie können die Schaltflächenkomponente auch verwenden, um Schaltflächen mit unterschiedlichen Stilen zu erstellen. Sie können beispielsweise dem Schaltflächenelement eine Klasse hinzufügen, um einen benutzerdefinierten Stil anzuwenden. Zum Beispiel:

import Button from "../components/Button";

const MyComponent = () => {
  return (
    <div>
      <Button text="Click me!" onClick={() => console.log("Button clicked!")} className="my-custom-class" />
    </div>
  );
};

export default MyComponent;

Dadurch wird eine Schaltfläche mit dem Text „Klick mich!“ gerendert. Auf die Schaltfläche wird auch die Klasse my-custom-class angewendet. Mit dieser Klasse können Sie die Schaltfläche in Ihrer CSS-Datei formatieren.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine wiederverwendbare Button-Komponente in ReactJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!