Как общаться ReactDOM.render с другими ReactDOM.render - PullRequest
Новая
       16

Как общаться ReactDOM.render с другими ReactDOM.render

0 голосов
/ 05 октября 2018

У меня есть проект, который включает приложения React и другие элементы HTML.Это означает:

ReactDOM.render(<Element1/>, document.getElementById('element1') <some section with HTML /> ReactDOM.render(<Element2/>, document.getElementById('element2')

Проблема в том, чтобы передать переменную / реквизит / состояние из одного ReactDOM.render в другой.

Как я могу это сделать?

В настоящее время я использую глобальную переменную window, но после изменения она не обновляет данные во втором ReactDOM.render.

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Для того чтобы два компонента React могли эффективно взаимодействовать посредством одного React, они должны взаимодействовать через общего родителя.

В случае двух несвязанных виджетов они могут отображаться как порталы с общим родителем, так какв предлагается этот ответ : 

<div id="App"></div>
<h2>Foo widget</h2>
<div id="FooWidget"></div>
<h2>Bar widget</h2>
<div id="BarWidget"></div>

class App extends Component {
  render() {
    state = {
      foo: 'foo',
      setFoo(foo) {
        this.setState(state => ({...state, foo}));
      }
    };

    return <FoobarContext.Provider value={this.state}>    
      {ReactDOM.createPortal(<FooWidget />, document.getElementById('FooWidget'))} 
      {ReactDOM.createPortal(<BarWidget />, document.getElementById('BarWidget'))} 
    </FoobarContext.Provider>;
  }
}

const FooWidget = props => <FoobarContext.Consumer>
  {({ foo }) => foo}
</FoobarContext.Consumer>;

...

ReactDOM.render(<App />, document.getElementById('App'));

Компоненты могут взаимодействовать через свойство контекста foo с помощью установщика setFoo.

АльтернативаReactDOM.render может использовать только Redux и подключить два несвязанных компонента к одному хранилищу.Они могут общаться через общий магазин.

0 голосов
/ 05 октября 2018

У вас есть различные опции, например подписка на события между приложениями: 

// App #1
const event = new Event('start');
// Dispatch the event.
elem.dispatchEvent(event);


// App #2 Listen for the event.
componentDidMount() {
  elem.addEventListener('start', this.start }, false);
}

start = (e) => {
  // ....
}

componentWillUnmount() {
  elem.removeEventListener('start');
}

В любом случае, вы должны использовать глобальный магазин, такой как компонент сбора Redux, который вам нужен из обоих приложений, так как решение такого типа очень сложно поддерживать.

...