Обернуть несколько компонентов React DOM в провайдере redux
У меня есть этот код в моем файле index.js в моем проекте ReactJS, и я хочу, чтобы тег redux <Provider> обернул их так, чтобы все они могли получить доступ к одному и тому же магазину,
. Вопрос в том, как я могу это сделать?
ReactDOM.render(<Header />, document.getElementById('header'));
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Footer />, document.getElementById('footer'));
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Что ж, если 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'));
Есть ли причина, по которой вам нужно настроить таргетинг на три элемента 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 создать-реагировать-приложение):
<body>
<noscript>JavaScript must be enabled to run this application.</noscript>
<div id = "root"></div>
</body>
Как уже предполагает другой ответ, этого можно достичь, используя тот же магазин в провайдере 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, имеющим несколько корневых компонентов, - использовать порталы для этих компонентов, как показано в этот ответ:
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 для монтирования приложения и не обязательно должен быть родительским для элементов заголовка и т. д.
Эта опция также может использоваться с React context API Provider или компонентом страницы state.
Обратите внимание на скобки для => (...), а не для => {...}. Для скобок требуется return. Скобки используют неявный возврат.
Разве в нем не должно быть заявления
return? потому что у меня есть ошибка, говорящая, чтоExpected an assignment or function call and instead saw an expressionв строке, где находится тег поставщика.