Как передавать данные между компонентами в ReactJS

Есть несколько типичных ситуаций передачи данные между компонентами в React:

• от родительского компонента к дочернему;
• от дочернего компонента к родительскому;
• между соседними компонентами;
• от компонента к компоненту-потомку (через несколько уровней вниз);
• от компонента к компоненту-предку (через несколько уровней вверх).

Данные можно передавать:

• через пропсы;
• используя callback-функцию;
• пробросом пропсов от уровня к уровню (prop drilling);
• при помощи контекста (React Context AP);
• через хранилище (store);

На практике также приходится передавать данные не только между компонентами, но и между страницами. Способы передачи данных между компонентами, находящимися на разных страницах, с помощью React Router можно прочитать в статье Полное руководство по React Router v6. Часть 3 - Управление навигацией.

От родительского компонента к дочернему

Наиболее простой и часто встречающийся случай - это случай, когда дочерний компонент принимает данные от родителя через пропсы.

import { useState } from 'react'

const Parent = () => {
  const [value, setValue] = useState('')

  const handleChange = (event) => {
    setValue(event.target.value)
  }

  return (
    <div>
       <input
         type="text"
         onChange={handleChange }
       />
      {/* передаем проп в дочерний компонент */}
      <Child value={value} />
    </div>
  )
}

const Child = ({ value }) => {
  return (
    <span>Value is: {value || '<Not set>'}</span>
  )
}

От дочернего компонента к родительскому

Если необходимо передать данные от дочернего реакт компонента к родительскому, используются функции обратного вызова (callback-функции).

import { useState } from 'react'

const Child = ({ onChange }) => {
  const handleChange = (event) => {
    onChange(event.target.value) // callback-функция
  }

  return (
    <input
      type="text"
      onChange={handleChange}
    />
  )
}

const Parent = () => {
  const [value, setValue] = useState('')
  const handleChange = (value) => {
    setValue(value)
  }

  return (
    <div>
      <span>Value is: {value || '<Not set>'}</span>
      <Child onChange={handleChange} />
    </div>
  )
}

Между соседними компонентами

Данные между соседними компонентами, т.е. между компонентами на одном уровне, можно передать через общий предок. Обычно данные от одного Реакт компонента передаются вверх, в компонент-предок, через callback-функцию, а компонент-предок передает их в другой компонент через проп.

import { useState } from 'react'

const Parent = () => {
  const [value, setValue] = useState('')

  const handleChange = (value) => {
    setValue(value)
  }

  return (
    <div>
      <Sibling1 onChange={handleChange} />
      <Sibling2 value={value} />
    </div>
  )
}


const Sibling1 = ({ onChange }) => {
  const handleChange = (event) => {
    onChange(event.target.value)
  }

  return (
    <input
      type="text"
      onChange={handleChange}
    />
  )
}

const Sibling2 = ({ value}) => {
  return (
    <span>Value is: {value || '<Not set>'}</span>
  )
}

Через несколько уровней вверх/вниз

Если компоненты находится в несколько уровнях друг от друга, то также можно передать проп. Этот проп придется описывать во всех компонентах на всех промежуточных уровнях. Эта ситуация называется prop drilling. Если уровней много, то такой способ покажется не очень удобным. Если нужно передавать данные на несколько уровней вверх, то также придется описывать и вызывать callback-функцию на всех промежуточных уровнях. Однако, в подобных случаях можно использовать Context API (пример которого приведен ниже), или state management библиотеки, такие как Redux, MobX, Recoil и т.д.

import { useState, useContext, createContext } from 'react'

// создаем контекст
const ValueContext = createContext()

// Component1 записывает данные в контекст ValueContext
const Component1 = () => {
  const { setValue } = useContext(ValueContext)

  const handleChange = (event) => {
    setValue(event.target.value)
  }

  return (
    <input
      type="text"
      onChange={handleChange}
    />
  )
}

// Component2 читает данные из контекста ValueContext
const Component2 = () => {
  const { value } = useContext(ValueContext)

  return (
    <span>Value is: {value || '<Not set>'}</span>
  )
}

// компоненты, которым необходим доступ к контексту,
// должны быть обернуты в Provider
export default function App() {
  const [value, setValue] = useState('')

  return (
    <ValueContext.Provider value={{ value, setValue }}>
      <Component1 />
      <Component2 />
    </ValueContext.Provider>
  )
}

Исходный код Подробное руководство по React

Основной принцип React состоит в создании компонентов, которые отображают и управляют состоянием пользовательского интерфейса. Одним из основных аспектов разработки с использованием ReactJS является работа с пагинацией и хуками. Пагинация - это процесс разделения длинного списка данных на несколько страниц, чтобы упростить навигацию пользователю. Пагинация может быть особенно полезна, когда необходимо отобразить большое количество данных и при этом сохранить производительность приложения. Хуки - это новая функциональность, появившаяся в ReactJS 16.8. Они позволяют использовать состояние и другие возможности React внутри функциональных компонентов. Хуки делают код более читабельным, улучшают его структуру и сокращают объем необходимого кода. Давайте рассмотрим, как работать с пагинацией и хуками на ReactJS для функциональных компонентов.

Шаг 1: Создание компонента и состояния

Сначала создайте функциональный компонент с помощью хука useState. Этот хук позволяет добавить состояние в функциональный компонент.

import React, { useState } from 'react';

const PaginationComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);

  return (
    <div>
      {/* Вставьте здесь свои компоненты для отображения данных */}
    </div>
  );
}

export default PaginationComponent;

Шаг 2: Создание функций для обработки пагинации

Создайте функции для обработки пагинации, такие как переключение на предыдущую и следующую страницу.

import React, { useState } from 'react';

const PaginationComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);

  const goToPreviousPage = () => {
    setCurrentPage((prev) => prev - 1);
  };

  const goToNextPage = () => {
    setCurrentPage((prev) => prev + 1);
  };

  return (
    <div>
      {/* Вставьте здесь свои компоненты для отображения данных */}
      <button onClick={goToPreviousPage}>Предыдущая страница</button>
      <button onClick={goToNextPage}>Следующая страница</button>
    </div>
  );
}

export default PaginationComponent;

Шаг 3: Использование состояния для отображения данных

Используйте текущую страницу для отображения соответствующих данных. Например, вы можете отобразить только 10 элементов на странице.

import React, { useState } from 'react';

const PaginationComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);

  const goToPreviousPage = () => {
    setCurrentPage((prev) => prev - 1);
  };

  const goToNextPage = () => {
    setCurrentPage((prev) => prev + 1);
  };

  // Предположим, у вас есть массив данных, который вам нужно отобразить
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
  const itemsPerPage = 10;
  const startIndex = (currentPage - 1) * itemsPerPage;
  const displayedData = data.slice(startIndex, startIndex + itemsPerPage);

  return (
    <div>
      {/* Отображение данных */}
      {displayedData.map((item) => (
        <div key={item}>{item}</div>
      ))}

      {/* Навигация по страницам */}
      <button onClick={goToPreviousPage} disabled={currentPage === 1}>
        Предыдущая страница
      </button>
      <button onClick={goToNextPage} disabled={currentPage === Math.ceil(data.length / itemsPerPage)}>
        Следующая страница
      </button>
    </div>
  );
}

export default PaginationComponent;

Это основы работы с пагинацией и хуками на ReactJS для функциональных компонентов. Вы можете настроить логику пагинации и функции обработки в зависимости от ваших потребностей. Помните, что React предлагает огромную гибкость при создании пользовательского интерфейса, и пагинация с хуками - только один из множества способов использования этой библиотеки.