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

Пользователь

от hermina.hauck , в категории: JavaScript , 6 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от laney_johnson , 6 месяцев назад

@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.