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

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

hermina.hauck

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

13 | 0

2 ответа

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

laney_johnson

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

@hermina.hauck

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

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

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

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

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

// Создание контекста
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.

0 | 0

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

jett

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

@hermina.hauck

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

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

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

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

1	npm install redux

Создайте хранилище, редюсеры и действия:

// 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;

Подключите Redux к вашему приложению и передавайте данные через хранилище:

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.

0 | 0

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

2 ответа

Похожие обсуждения: