обернуть компонент DOM с множественной реакцией в провайдере - PullRequest
Новая
       6

обернуть компонент DOM с множественной реакцией в провайдере

0 голосов
/ 30 ноября 2018

У меня есть этот код в моем index.js файле в моем проекте ReactJS, и я хочу, чтобы тег <Provider> избыточности обернул их так, чтобы все они могли получить доступ к одному и тому же магазину,Вопрос в том, как я могу это сделать? 

ReactDOM.render(<Header />, document.getElementById('header'));
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Footer />, document.getElementById('footer'));

Ответы [ 3 ]

0 голосов
/ 30 ноября 2018

Есть ли причина, по которой вам нужно настроить таргетинг на три HTML-элемента?Стандартной практикой здесь будет просто нацелиться на root и обработать все остальное в приложении React, как показано ниже:

В index.js: 

const store = createStore(...);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, document.getElementById('root'));

В App.js: 

export default = () =>
  <Header />
  <Body />
  <Footer />

Все ваше тело HTML будет выглядеть следующим образом (рекомендуемый подход Facebook create-Reaction-app ): 

<body>
  <noscript>JavaScript must be enabled to run this application.</noscript>
  <div id="root"></div>
</body>
0 голосов
/ 30 ноября 2018

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

ReactDOM.render(
  <Provider store={store}><Header /></Provider>,
  document.getElementById('header')
);
ReactDOM.render(
  <Provider store={store}><App /></Provider>, 
  document.getElementById('root')
);
ReactDOM.render(
  <Provider store={store}><Footer /></Provider>,
  document.getElementById('footer')
);

Еще один параметр, который не относится к Redux, но также может использоваться с любым приложением React.который имеет несколько корневых компонентов, должен использовать порталы для этих компонентов, как показано в this answer : 

const Page = props => (
  <Provider store={store}>    
      {ReactDOM.createPortal(<Header/>, document.getElementById('header'))} 
      {ReactDOM.createPortal(<App/>, document.getElementById('root'))} 
      {ReactDOM.createPortal(<Footer/>, document.getElementById('footer'))}
  </Provider>
);

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

, где <div id="page"></div> - это элемент-заполнитель, который существует в теле HTML для монтирования приложения.и не обязательно должен быть родительским для элементов заголовка и т. д.

Этот параметр также можно использовать с контекстным API React Provider или компонентом страницы state.

0 голосов
/ 30 ноября 2018

Что ж, если store - то же самое, тогда вы можете просто применить <Provider> ко всем фигурам, и все они будут использовать один и тот же магазин Redux.Provider не обязательно должен быть уникальным, просто store.Как то так: 

const store = createStore(...); // or any valid Redux store declaration or import

ReactDOM.render(<Provider store={store}><Header /></Provider>, document.getElementById('header'));
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
ReactDOM.render(<Provider store={store}><Footer /></Provider>, document.getElementById('footer'));
...