Как передавать данные между компонентами в react.js?

@hermina.hauck 

В React.js данные между компонентами можно передавать с помощью пропсов (props) и контекста (context).

1. Пропсы (props) - это параметры, которые передаются из родительского компонента в дочерний компонент. Для передачи данных используется атрибуты компонента. Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// Родительский компонент
class ParentComponent extends React.Component {
  render() {
    const data = "Данные для дочернего компонента";
    return ;
  }
}

// Дочерний компонент
class ChildComponent extends React.Component {
  render() {
    return {this.props.data};
  }
}

1. Контекст (context) - это механизм передачи данных через иерархию компонентов без явной передачи пропсов через каждый компонент. В React, контекст используется как альтернативный способ передачи данных. Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Создание контекста
const MyContext = React.createContext();

// Родительский компонент
class ParentComponent extends React.Component {
  render() {
    const data = "Данные для дочернего компонента";
    return (
      
        
      
    );
  }
}

// Дочерний компонент
class ChildComponent extends React.Component {
  static contextType = MyContext;

  render() {
    return {this.context};
  }
}

В данном примере контекст создается с помощью функции React.createContext(), а затем используется с помощью компонента MyContext.Provider, который оборачивает все дочерние компоненты, которым необходим доступ к контексту. Дочерний компонент может получить доступ к контексту с помощью static contextType и this.context.