DEV Community

francesco agati
francesco agati

Posted on

Utilizzare i Partial in React per Componenti Configurabili

L'utilizzo dei partial in React può migliorare notevolmente la modularità e la flessibilità dei componenti, consentendo di creare componenti configurabili con facilità. In questo articolo, esploreremo come sfruttare i partial in React attraverso un esempio concreto.

Concetto di Partial in React

In React, i partial possono essere implementati come funzioni che restituiscono componenti con alcune prop preimpostate. Questo approccio consente di creare componenti altamente personalizzabili e riutilizzabili senza dover ripetere costantemente la stessa configurazione.

Esempio di Uso dei Partial in React

Immaginiamo di dover creare una serie di bottoni personalizzati in un'applicazione React, con colori diversi, dimensioni e azioni al clic. Utilizzeremo i partial per semplificare la creazione di questi bottoni.

import React from 'react';

// Definiamo un componente di base per i bottoni
function Button({ label, color, size, onClick }) {
  const buttonStyle = {
    backgroundColor: color || 'blue',
    fontSize: size || '16px',
    padding: '10px 20px',
    borderRadius: '5px',
    color: 'white',
    cursor: 'pointer',
  };

  return (
    <button style={buttonStyle} onClick={onClick}>
      {label}
    </button>
  );
}

// Creiamo dei partial per configurare rapidamente i bottoni
function createPrimaryButton(label, onClick) {
  return <Button label={label} color="blue" onClick={onClick} />;
}

function createSecondaryButton(label, onClick) {
  return <Button label={label} color="green" onClick={onClick} />;
}

function createLargeButton(label, onClick) {
  return <Button label={label} size="24px" onClick={onClick} />;
}

function App() {
  const handlePrimaryClick = () => {
    alert('Hai cliccato su un pulsante primario!');
  };

  const handleSecondaryClick = () => {
    alert('Hai cliccato su un pulsante secondario!');
  };

  return (
    <div>
      {createPrimaryButton('Pulsante Primario', handlePrimaryClick)}
      {createSecondaryButton('Pulsante Secondario', handleSecondaryClick)}
      {createLargeButton('Pulsante Grande', () => {})}
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

In questo esempio, abbiamo creato un componente React di base chiamato Button, che accetta alcune prop come label, color, size, e onClick. Successivamente, abbiamo definito diverse funzioni createPartialButton che sono partial del componente Button. Questi partial consentono di configurare rapidamente i bottoni con diverse caratteristiche preimpostate come il colore, la dimensione e l'azione al clic.

Nel componente App, utilizziamo i partial createPrimaryButton, createSecondaryButton, e createLargeButton per generare i bottoni personalizzati con configurazioni specifiche.

L'utilizzo dei partial in React semplifica notevolmente la creazione e la configurazione di componenti personalizzati, contribuendo a rendere il codice più modulare ed espandibile.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more