Як передавати дані та події між компонентами в React

Оригінальна публікація: How to Pass Data and Events Between Components in React

Якщо ви спробуєте реалізувати операції CRUD (тобто чотири базові функції: створення, читання, оновлення та видалення) за допомогою кінцевих точок API, то ви можете виявити, що керувати даними в кількох компонентах дещо важко.

Або, можливо, у вас є модальний компонент, але ви хочете запустити його з іншого компоненту.

Розібратися, як впоратися з цими сценаріями, може бути важко.

У цій публікації я покажу, як ви можете це зробити.

Як передати дані між батьківським та дочірнім компонентом

Спершу давайте передамо дані між батьківським і дочірнім компонентами.

Спочатку вам потрібно буде створити два компоненти, один батьківський і один дочірній.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Далі ви імпортуєте дочірній компонент у батьківський і повертаєте його.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Потім ви створюєте функцію та кнопку для запуску цієї функції. Крім того, ви створюєте стан за допомогою хука useState, щоб керувати даними.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Як ви можете бачити тут, ми викликаємо функцію parentToChild після натискання кнопки Click Parent. Коли натиснуто кнопку Click Parent, у змінній data буде збережено «This is data from Parent Component to the Child Component».

Тепер давайте передамо цей стан даних нашим дочірнім компонентам. Ви можете зробити це за допомогою пропсів.

Передайте дані як пропси, коли викликаєте дочірній компонент, таким чином:

<Child parentToChild={data}/>

Тут ми передаємо дані дочірнього компонента як data.

data — це дані, які ми повинні передати, а parentToChild — це назва пропсу.

Далі настав час записати дані в дочірній компонент. А це дуже просто.

Тут може бути два випадки.

Випадок 1: якщо ви використовуєте функціональний компонент, просто перехопіть parentToChild у параметрах.

import React from 'react'

export default function Child({parentToChild}) {
    return (
        <div>
            {parentToChild}
        </div>
    )
}

Випадок 2: якщо у вас компонент класу, просто використайте this.props.parentToChild.

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                {this.props.parentToChild}
            </div>
        )
    }
}

У будь-якому випадку ви отримаєте однакові результати:

Коли ми натискаємо на кнопку Click Parent, ми побачимо виведені дані на екрані.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child parentToChild={data}/>
      
      <div className="child">
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Вище ви бачите повний код для Parent Component.

Як передати дані між дочірнім та батьківським компонентом

Це дещо складніше.

Спершу вам потрібно створити функцію в батьківському компоненті під назвою childToParent і порожній стан під назвою data.

const [data, setData] = useState('');

const childToParent = () => {
   
}

Потім передайте функцію childToParent як пропс до дочірнього компонента.

<Child childToParent={childToParent}/>

Тепер у дочірньому компоненті прийміть виклик цієї функції як пропс та призначте його до події onClick.

Крім того, оголосіть стан, який містить деякі дані у вигляді рядка або числа.

Потім передайте дані до функції parentToChild як параметри.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    const data = "This is data from Child Component to the Parent Component."
    return (
        <div>
            <Button primary onClick={() => childToParent(data)}>Click Child</Button>
        </div>
    )
}

Далі в батьківському компоненті прийміть ці дані у функції childToParent як параметр та налаштуйте дані за допомогою хука useState.

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
      <div>
        <Child/>
      </div>
    </div>
  );
}

export default Parent;

Потім покажіть цю змінну data у функції повернення.

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
     {data}
      <div>
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

Дочірня змінна data перезапише батьківську, коли кнопку Click Child буде натиснуто.

Тепер ви можете передавати дані від дочірнього компоненту до батьківського і від батьківського до дочірнього як професіонал.

Ви також можете передавати такі події, як onClick або OnChange

Просто викличте метод alert у функції childToParent і передайте цю функцію як пропс дочірньому компоненту.

import './App.css';
import Child from './Child';

function Parent() {
  const childToParent = () => {
    alert("This is an alert from the Child Component")
  }

  return (
    <div className="App">
      <div className="child">
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

А в дочірньому компоненті прийміть функцію childToParent як пропс. Потім призначте його до події onClick у кнопці.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    return (
        <div>
            <Button primary onClick={() => childToParent()}>Click Child</Button>
        </div>
    )
}

Ваша функція в батьківському компоненті буде викликана, коли ви натиснете кнопку в дочірньому компоненті, і ви побачите таке сповіщення:

Це все!

Ви можете знайти код на Github, якщо бажаєте експериментувати далі.

Ну ось і все, народе. Щасливого навчання.