#reactjs #react-context
#reactjs #реагировать-контекст
Вопрос:
Мне нужны два компонента React для обмена данными, но я не могу использовать контекст React. Это то, что я не могу контролировать, я привожу два отдельных сторонних «виджета» в разные области одной и той же веб-страницы.
Какие варианты у меня есть? На данный момент я создал автономный объект, который я импортирую в оба компонента. Есть ли какие-либо проблемы с этим, и есть ли лучший способ?
Общий объект: PP_Properties.js
function PP_PropertiesFactory() {
let properties = {Property1: null, Property2: null, Property3: null};
const updateProperties = ({targetProperty, newValue}) => properties[targetProperty] = newValue;
return {...properties, updateProperties};
}
export const PP_Properties = PP_PropertiesFactory();
Компонент виджета 1
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {PP_Properties} from './PP_Properties';
export const Widget1Component = (props) => {
// Use PP_Properties in this element
// Update PP_Properties using the updateProperties() method
};
Компонент Widget 2
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {PP_Properties} from './PP_Properties';
export class Widget2ComponentBuilder {
// Consume PP_Properties in this element
// Update PP_Properties using updateProperties()
}
export function Widget2Component() {
return new Widget2ComponentBuilder();
};
Комментарии:
1. Почему вы не можете использовать Context API? Можете ли вы управлять реквизитами, передаваемыми обоим виджетам, и где виджеты находятся в структуре приложения? Использование некоторого глобального объекта в react, как правило, является антишаблоном, но если это то, что вам нужно, то обеспечение любых обновлений для него необходимо будет управлять вручную, поскольку это будет полностью вне экосистемы react.
2. Из-за того, как структурирована страница (не под моим контролем), я не могу поместить эти два компонента в один и тот же MyContext. Компонент поставщика. Спасибо за комментарий, действительно, это похоже на анти-шаблон.
3. Я думаю, мне неясно ( без дополнительного контекста ), как у вас есть доступ к источнику для выполнения работы, но вы не можете поместить поставщика контекста или эту дополнительную логику в общего предка для любого компонента виджета.
4. Не беспокойтесь, просто пытаюсь лучше понять ваш вариант использования и ограничения. Итак, вы в основном также создаете сторонний модуль, который «вставляет» компоненты react в заполнители? Это немного более точное описание? Можно ли использовать портал react для создания общего предка и обернуть оба виджета в HOC, который может взаимодействовать с центральной логикой в компоненте портала и передавать свойства в виджеты?
5. @Christophe Для простой библиотеки, которая реализует возможности, подобные глобальному состоянию, попробуйте zustand — github.com/pmndrs/zustand
Ответ №1:
После некоторого чтения кажется, что я прошу библиотеку, которая выполняет глобальное управление состоянием, такое как Redux.
Полноценная библиотека, вероятно, является излишеством для моих простых потребностей, поэтому я рассматриваю более легкие варианты. Имена, которые я слышал до сих пор, — это mobx, ReactN, React Entities и React Capsule.
Еще более простой подход заключается в сохранении моей первоначальной идеи объекта, импортируемого и обрабатываемого обоими компонентами. Как сказал @drew-reese, сначала это выглядело как анти-шаблон, но на самом деле так работают эти библиотеки управления состоянием.
Вот пример: