Передача данных между компонентами в React

Содержание туториала по React Иногда нужно, чтобы состояние двух компонентов всегда менялось вместе. Для этого нужно удалить их собственное состояние, переместить его к их ближайшему общему родителю, а затем передать его им через пропсы. Это известно как поднятие состояния вверх, и это одна из самых распространенных вещей, которые вы будете делать при написании React кода.

Поднятие состояния на примере

В этом примере родительский компонент Accordion отображает две отдельные панели:

• Accordion
  • Panel
  • Panel

Каждый компонент Panel имеет булевское состояние isActive, которое определяет, видимо ли его содержимое.

import { useState } from 'react';

function Panel({ title, children }) {
  const [isActive, setIsActive] = useState(false);
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={() => setIsActive(true)}>Show</button>
      )}
    </section>
  );
}

export default function Accordion() {
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel title="About">
        With a population of about 2 million, Almaty is Kazakhstan's largest
        city. From 1929 to 1997, it was its capital city.
      </Panel>
      <Panel title="Etymology">
        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for
        "apple" and is often translated as "full of apples". In fact, the region
        surrounding Almaty is thought to be the ancestral home of the apple, and
        the wild <i lang="la">Malus sieversii</i> is considered a likely
        candidate for the ancestor of the modern domestic apple.
      </Panel>
    </>
  );
}

Обратите внимание, что нажатие кнопки одной панели не влияет на другую панель — они независимы. Но теперь предположим, что вы хотите изменить его так, чтобы в любой момент времени раскрывалась только одна панель. При таком дизайне расширение второй панели должно привести к сворачиванию первой. Как бы Вы это сделали? Чтобы согласовать эти две панели, вам нужно «поднять их состояние» до родительского компонента в три шага:

1. Удалить состояние из дочерних компонентов.
2. Передать захардкоженные данные от общего родителя.
3. Добавить состояние к общему родителю и передать его вместе с обработчиками событий.

Это позволит компоненту Accordion координировать обе панели и разворачивать только одну за раз.

Шаг 1: Удалить состояние из дочерних компонентов

Вы передадите контроль над isActive панели ее родительскому компоненту. Это означает, что вместо этого родительский компонент будет передавать isActive в Panel в качестве пропса. Начните с удаления этой строки из компонента Panel:

const [isActive, setIsActive] = useState(false);

Вместо этого добавьте isActive в список пропсов Panel:

function Panel({ title, children, isActive }) {

Теперь родительский компонент компонента Panel может управлять isActive, передавая его как проп. И наоборот, компонент Panel теперь не имеет контроля над значением isActive — теперь это зависит от родительского компонента.

Шаг 2. Передать захардкоженные данные от общего родителя

Чтобы поднять состояние, вы должны найти ближайший общий родительский компонент обоих дочерних компонентов, которые вы хотите скоординировать:

• Accordion (ближайший общий родитель)
  • Panel
  • Panel

В данном примере это компонент Accordion. Поскольку он находится над обеими панелями и может управлять их пропсами, он станет «источником правды» для той панели, которая в данный момент активна. Заставим компонент Accordion передавать жестко заданное значение isActive (например, true) на обе панели:

import { useState } from 'react';

export default function Accordion() {
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel title="About" isActive={true}>
        With a population of about 2 million, Almaty is Kazakhstan's largest
        city. From 1929 to 1997, it was its capital city.
      </Panel>
      <Panel title="Etymology" isActive={true}>
        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for
        "apple" and is often translated as "full of apples". In fact, the region
        surrounding Almaty is thought to be the ancestral home of the apple, and
        the wild <i lang="la">Malus sieversii</i> is considered a likely
        candidate for the ancestor of the modern domestic apple.
      </Panel>
    </>
  );
}

function Panel({ title, children, isActive }) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={() => setIsActive(true)}>Show</button>
      )}
    </section>
  );
}

Шаг 3: Добавить состояние к общему родителю

Поднятие состояния часто меняет характер того, что вы храните как состояние. При этом одновременно должна быть активна только одна панель. Это означает, что общий родительский компонент Accordion должен отслеживать, какая панель является активной. Вместо булевского значения он может использовать число в качестве индекса активной панели для переменной состояния:

const [activeIndex, setActiveIndex] = useState(0);

Когда activeIndex равен 0, активна первая панель, а когда 1 — вторая. При нажатии кнопки «Показать» на любой из панелей необходимо изменить активный индекс в Accordion. Panel не может установить состояние activeIndex напрямую, потому что оно определено внутри Accordion. Компонент Accordion должен явно разрешить компоненту Panel изменять свое состояние, передав обработчик событий в качестве пропса:

<>
  <Panel isActive={activeIndex === 0} onShow={() => setActiveIndex(0)}>
    ...
  </Panel>
  <Panel isActive={activeIndex === 1} onShow={() => setActiveIndex(1)}>
    ...
  </Panel>
</>

<button> внутри Panel теперь будет использовать проп onShow в качестве обработчика события click:

import { useState } from 'react';

export default function Accordion() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel
        title="About"
        isActive={activeIndex === 0}
        onShow={() => setActiveIndex(0)}
      >
        With a population of about 2 million, Almaty is Kazakhstan's largest
        city. From 1929 to 1997, it was its capital city.
      </Panel>
      <Panel
        title="Etymology"
        isActive={activeIndex === 1}
        onShow={() => setActiveIndex(1)}
      >
        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for
        "apple" and is often translated as "full of apples". In fact, the region
        surrounding Almaty is thought to be the ancestral home of the apple, and
        the wild <i lang="la">Malus sieversii</i> is considered a likely
        candidate for the ancestor of the modern domestic apple.
      </Panel>
    </>
  );
}

function Panel({ title, children, isActive, onShow }) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? <p>{children}</p> : <button onClick={onShow}>Show</button>}
    </section>
  );
}

Это завершает подъем состояния вверх. Перемещение состояния в общий родительский компонент позволило согласовать две панели. Использование активного индекса вместо двух флажков «показано» гарантировало, что в данный момент активна только одна панель. А передача обработчика событий дочернему компоненту позволяла дочернему компоненту изменять состояние родителя.

Управляемые и неуправляемые компоненты

Обычно компонент с некоторым локальным состоянием называют "неуправляемым". Например, исходный компонент Panel с переменной состояния isActive не контролируется, поскольку его родитель не может влиять на то, активна панель или нет. Напротив, вы можете сказать, что компонент "управляется", когда важная информация в нем управляется пропсами, а не его собственным локальным состоянием. Это позволяет родительскому компоненту полностью определять свое поведение. Последний компонент Panel с пропсом isActive управляется компонентом Accordion. Неуправляемые компоненты проще использовать в своих родительских компонентах, поскольку они требуют меньшей настройки. Но они менее гибкие, когда вы хотите скоординировать их вместе. Управляемые компоненты максимально гибкие, но требуют от родительских компонентов полной настройки их пропсами. На практике «управляемый» и «неуправляемый» не являются строгими техническими терминами — каждый компонент обычно имеет некоторое сочетание локального состояния и свойств. Тем не менее, это полезный способ рассказать о том, как устроены компоненты и какие возможности они предлагают. При написании компонента учитывайте, какая информация в нем должна управляться (через пропсы), а какая информация не должна управляться (через состояние). Но вы всегда можете передумать и провести рефакторинг позже.

Единый источник правды для каждого состояния

В React приложении многие компоненты будут иметь собственное состояние. Некоторое состояние может «жить» рядом с компонентами-листьями (компонентами в нижней части дерева), такими как инпуты (<input />). Другое состояние может «жить» ближе к верху приложения. Например, даже клиентские библиотеки маршрутизации обычно реализуются путем сохранения текущего маршрута в состоянии React и передачи его в пропсах Для каждой уникальной части состояния вы выберете компонент, который «владеет» им. Этот принцип также известен как наличие «единого источника истины». Это не означает, что все состояния хранятся в одном месте, но для каждой части состояния существует определенный компонент, который содержит эту часть информации. Вместо того, чтобы дублировать общее состояние между компонентами, вы поднимете его до их общего родителя и передадите его дочерним элементам, которым оно нужно. Ваше приложение будет меняться по мере того, как вы будете над ним работать. Обычно вы перемещаете состояние вниз или назад, пока вы все еще выясняете, где «живет» каждая часть состояния. Это все часть процесса. Чтобы увидеть, как это выглядит на практике с еще несколькими компонентами, прочитайте статью Мышление в стиле React.

Резюме

• Если вы хотите скоординировать два компонента, переместите их состояние в их общий родитель.
• Затем передайте информацию через пропсы от их общего родителя.
• Наконец, передайте обработчики событий, чтобы потомки могли изменить состояние родителя.
• Полезно рассматривать компоненты как «управляемые» (управляемые пропсами) или «неуправляемые» (управляемые состоянием).
• Таким образом можно выделить такие случаи передачи данных в React:
  • от родительского компонента к дочернему;
  • от дочернего компонента к родительскому;
  • между соседними компонентами;
  • от компонента к компоненту-потомку (через несколько уровней вниз);
  • от компонента к компоненту-предку (через несколько уровней вверх).

Подробный разбор этих случаев с примерами вы можете найти в статье Как передавать данные между компонентами в ReactJS.

В JSX нам нужно обернуть выражения JavaScript фигурными скобками { }. Обычный JavaScript:

<button onclick="hitMe()">hit me</button>

В ReactJS:

<button onClick={hitMe}>hitme</button>

Рассмотрим подробнее, как присоединить обработчики событий в функциональных и классовых компонентах.

Функциональные компоненты

function Button() {
  function handleClick() {
    alert('some one clicked me')
  }
  
  return (
    <button onClick={handleClick}>Click me</button>
  )
}

В React нам нужно передать функцию обработчика событий.

Передача аргументов

Мы также можем передавать аргументы в функции обработчика событий, подобные этой.

function Button() {
  function handleClick(name) {
     alert(name)
  }

  return (
    <button onClick={()=>handleClick('react')}>Click me</button>
  )
}

Классовые компоненты

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0
    }
  }

  handleInc(){
    this.setState({
      num: this.state.num+1
    })
  }

  render(){
    return (
       <div>
        <h1>Counter</h1>
        <h3>{this.state.num}</h3>
        <button onClick={this.handleInc.bind(this)}>Increment</button>
      </div>
    )
  }
}

В компонентах на основе классов нам нужно привязать this к классу, иначе this будет привязано к global window object или в строгом режиме this будет undefined. Мы можем решить эту проблему с помощью стрелочных функций, потому что в стрелочных функциях this будет привязано к его внешнему контексту выполнения. Давайте модифицируем приведенный выше компонент с помощью стрелочных функций.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0
    }
  }

  handleInc() {
    this.setState({
      num: this.state.num+1
    })
  }

  render(){
    return (
       <div>
        <h1>Counter</h1>
        <h3>{this.state.num}</h3>
        <button onClick={()=>this.handleInc()}>Increment</button>
      </div>
    )
  }
}

Второй способ использования class fields syntax

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0
    }
  }

  // стрелочная функция
  handleInc = () => {
    this.setState({
      num: this.state.num+1
    })
  }

  render() {
    return (
       <div>
        <h1>Counter</h1>
        <h3>{this.state.num}</h3>
        <button onClick={this.handleInc}>Increment</button>
      </div>
    )
  }
}

Объект события

Мы также можем использовать объект события таким образом в react.

function Link(){

  function handleClick(e){
     console.log(e);
     e.preventDefault();
  }

  return (
      <a href="#" onClick={handleClick} >Click me</a>
  )
}