Ответ 1
Вы хотите реализовать некоторый объект, который хранит ваше состояние, которое может быть изменено с помощью функций обратного вызова. Затем вы можете передать эти функции вашим компонентам React.
Например, вы можете создать хранилище:
function Store(initialState = {}) {
this.state = initialState;
}
Store.prototype.mergeState = function(partialState) {
Object.assign(this.state, partialState);
};
var myStore = new Store();
ReactDOM.render(
<FirstComponent mergeState={myStore.mergeState.bind(myStore)} />,
firstElement
);
ReactDOM.render(
<SecondComponent mergeState={myStore.mergeState.bind(myStore)} />,
secondElement
);
Теперь оба экземпляра FirstComponent и SecondComponent могут вызвать this.props.mergeState({ . . .}), чтобы назначить состояние одному и тому же хранилищу.
Я оставляю Store.prototype.getState как упражнение для читателя.
Обратите внимание, что вы всегда можете передать хранилище (myStore) самому компонентам; он просто чувствует себя меньше реагировать на это.
Вот еще несколько документов, которые могут представлять интерес:
React Docs: "Общение между компонентами"
Для связи между двумя компонентами, которые не имеют parent-child, вы можете настроить собственное глобальное событие система. Подписаться на события в компонентеDidMount(), отписаться в componentWillUnmount() и call setState(), когда вы получаете событие. Паттерн потока является одним из возможных способов его организации.