Realizzare UI con Reat - 7. 구성 요소 구성

I componenti sono molto comodi, perché ci aiutano a suddividere la UI in pezzi più piccoli con chiare responsabilità ed interface ben Reservation. Questo è molto Importante quando si lavora su un'applicazione di grandi dimensioni, perché ci permette di lavorare su piccoli pezzi dell'applicazione senza modificare inavvertitamente tutto il resto. Un altro grande vantaggio dei componenti è che ci incoraggiano ad usare la composizione invece dell'ereditarietà. Vediamo meglio cosa intento per composizione.

Composizione con la Lista di Contatti

새로운 응용 프로그램에 적용할 수 있는 작업은 React creata concreate-react-app come abbiamoappena visto ed inseriamoci l'empio con la lista di contatti di cui abbiamoparlato in precedenza입니다.

import React from 'react';
import './App.css';

const Contatti = () => {
  const persone = ['Matteo', 'Silvia', 'Daniele', 'Marco'];

  return (
    <ul>
      {persone.map((persona) => (
        <li key={persona}>{persona}</li>
      ))}
    </ul>
  );
};

function App() {
  return (
    <div className="App">
      <Contatti />
    </div>
  );
}

export default App;

App.js 수정 콘라 목록 수정



와서 potete vedere è veramente semplice prendere il componente Contatti che abbiamo creato in preenza ed usarlo all'interno di App . 모든 내부 요소를 캡슐화하여 구성 요소를 다양하게 활용할 수 있습니다. Per iniziare rende estremamente semplice il riuso di tutti questi elementi. Se ad empio io volesi avere più copye della lista dei contatti, dovrei incollare più volte il componente Contatti

function App() {
  return (
    <div className="App">
      <Contatti />
      <Contatti />
      <Contatti />
    </div>
  );
}

복사 다중 디Contatti

Semplice Interfaccia dei Componenti

Un'altra caratteristica interessate è che i componenti ci offrono un'interfaccia chiara in modo da poter semplicemente configurare Differenti componenti passandogli delle Differenti proprietà.

다양한 사람의 목록에 포함된 목록은 다양합니다. questo caso quindi vorrei poter configurare i componenti Contatti in the modo indipendente uno dall'altro. Sarebbe comodo se Contatti abse una proprietà in modo da passargli la lista di persone invece di averla inchiodata all'invece del componente.

Prendiamo quindi il nostro componente Contatti ed aggiungiamogli un parametro props che conterrà tutte le proprietà che passeremo al componente e prendiamo la lista di persone da questo oggetto.

const Contatti = (props) => {
  const { persone } = props;

  return (
    <ul>
      {persone.map((persona) => (
        <li key={persona}>{persona}</li>
      ))}
    </ul>
  );
};

ComponenteContatti modificato per usarepersone estratto daprops


Ogni componente Riceve un oggetto props che contiene tutte le proprietà che passeremo al componente.

Quindi ora possiamo passare una diversa lista di persone ed averemo una diversa lista di contatti! Modifichiamo ora la nostra applicazione per avere nella prima lista di contatti solo Matteo e Silvia, mentre nella seconda passiamo Daniele e Marco ed infine eliminiamo la terza.

vedete è estremamente semplice riusare questi componenti passandogli la configurazione attraverso props .

React에서 구성 요소를 구성할 수 있는 구성 요소에 대한 질문은 다음과 같습니다.

La capacità di incapsulare elementi in una componente in modo da poterli riutilizzare

La capacità di configurare questi componenti in modo differente ed indipendente attraverso props

Qui potete trovare i sorgenti dell'applicazione