Comment créer un composant Button réutilisable dans ReactJS

Les boutons sont indéniablement des composants d'interface utilisateur importants de toute application React, les boutons peuvent être utilisés dans des scénarios tels que la soumission d'un formulaire ou l'ouverture d'une nouvelle page. Vous pouvez créer des composants de boutons réutilisables dans React.js que vous pouvez utiliser dans différentes sections de votre application. En conséquence, la maintenance de votre application sera plus simple et votre code restera SEC (Ne vous répétez pas).

Vous devez d'abord créer un nouveau fichier dans votre dossier de composants nommé Button.jsx afin de construire un composant bouton réutilisable. L'étape suivante consiste à définir la fonction "Button", qui accepte les paramètres text et onClick.

Le texte qui sera affiché sur le bouton est contenu dans le prop texte. Lorsque vous cliquez sur le bouton, une fonction spécifiée par la prop onClick sera appelée.

Enfin, vous devez renvoyer un élément « bouton » dont la prop text est définie sur le texte à afficher sur le bouton et la prop onClick est définie sur le gestionnaire de l'événement onclick du bouton.

Voici un exemple de composant de bouton réutilisable dans React.js :

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

export default Button;

Une fois que vous avez créé votre composant bouton réutilisable, vous pouvez l'importer dans n'importe quel autre composant dans lequel vous souhaitez l'utiliser. Par exemple, vous pouvez créer un composant appelé MyComponent qui utilise le composant Button pour afficher un bouton avec le texte. "Cliquez sur moi!".

Voici un exemple d'utilisation du composant Button dans un autre composant :

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

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

export default MyComponent;

Cela affichera un bouton avec le texte "Cliquez sur moi !". Lorsque vous cliquez sur le bouton, la fonction console.log sera appelée et le message "Bouton cliqué!" sera connecté à la console.

Vous pouvez également utiliser le composant Button pour créer des boutons avec différents styles. Par exemple, vous pouvez ajouter une classe à l'élément bouton pour appliquer un style personnalisé. Par exemple :

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;

Cela affichera un bouton avec le texte "Cliquez sur moi !". Le bouton aura également la classe my-custom-class qui lui sera appliquée. Vous pouvez utiliser cette classe pour styliser le bouton dans votre fichier CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!