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

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

от hermina.hauck , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от laney_johnson , год назад

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

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

от jett , 4 месяца назад

@hermina.hauck 

Также можно использовать библиотеку для управления состоянием, такую как Redux или MobX, для передачи данных между компонентами в React.js. Эти библиотеки обеспечивают глобальное состояние приложения, которое доступно для всех компонентов без необходимости передачи данных через пропсы или контекст.


Redux, например, позволяет создать глобальное хранилище данных и использовать функции для изменения и получения данных. Компоненты могут подписываться на изменения в хранилище и обновляться соответственно.


Пример использования Redux:

  1. Установите пакет redux с помощью npm или yarn:
1
npm install redux


  1. Создайте хранилище, редюсеры и действия:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// actions.js
export const setData = data => ({
  type: 'SET_DATA',
  payload: data
});

// reducers.js
const initialState = {
  data: ''
}

const dataReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'SET_DATA':
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

// store.js
import { createStore } from 'redux';
import dataReducer from './reducers';

const store = createStore(dataReducer);

export default store;


  1. Подключите Redux к вашему приложению и передавайте данные через хранилище:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { Provider } from 'react-redux';
import store from './store';

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

    return (
      <Provider store={store}>
        <ChildComponent />
      </Provider>
    );
  }
}

// Дочерний компонент
import { connect } from 'react-redux';

class ChildComponent extends React.Component {
  render() {
    return {this.props.data};
}

const mapStateToProps = state => ({
  data: state.data
});

export default connect(mapStateToProps)(ChildComponent);


Таким образом, используя Redux, данные могут быть переданы между компонентами без явной передачи через пропсы или контекст, что упрощает управление состоянием в приложениях React.js.