Comunicação entre Componentes

A comunicação entre componentes é essencial em aplicações React para transmitir dados e eventos entre diferentes partes da interface. Existem duas principais formas de realizar essa comunicação: props e eventos.

Props

As props são utilizadas para passar dados de um componente pai para um componente filho. Isso permite que informações sejam compartilhadas de forma hierárquica na árvore de componentes. Por exemplo:

// Componente Pai
function App() {
  return <ChildComponent name="John" />;
}

// Componente Filho
function ChildComponent(props) {
  return <p>Hello, {props.name}!</p>;
}

Eventos

Os eventos são usados para transmitir ações ou interações do usuário de um componente filho para um componente pai.

Isso é feito através da definição de funções de callback no componente pai, que são então passadas como props para o componente filho. Por exemplo:

// Componente Pai
function App() {
  function handleClick() {
    alert("Button clicked!");
  }

  return <ChildComponent onClick={handleClick} />;
}

// Componente Filho
function ChildComponent(props) {
  return <button onClick={props.onClick}>Click me</button>;
}

Essas técnicas de comunicação entre componentes são fundamentais para criar aplicações React robustas e flexíveis, permitindo que diferentes partes da interface interajam entre si de forma eficiente e organizada.

Compartilhar

Compartilhar

Siga-me