Unë e kam këtë kod në skedarin tim index.js në projektin tim ReactJS dhe dua që etiketa <Provider> e redux t'i mbyllë ato në mënyrë që të gjithë të kenë akses në të njëjtin dyqan,
Pyetja është, si mund ta bëj këtë?
ReactDOM.render(<Header />, document.getElementById('header'));
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Footer />, document.getElementById('footer'));
Epo, nëse store është i njëjtë, atëherë thjesht mund të aplikoni <Provider> në të gjitha pjesët dhe të gjitha do të përdorin të njëjtin dyqan Redux. Provider nuk është e detyrueshme të jetë unike, vetëm store. Diçka si kjo:
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'));
Siç sugjeron tashmë një përgjigje tjetër, kjo mund të arrihet duke përdorur të njëjtin dyqan në ofruesin Redux. Meqenëse Redux nuk është i lidhur me hierarkinë e komponentëve React, komponentët e lidhur nuk duhet domosdoshmërisht të kenë një prind të përbashkët:
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')
);
Një opsion tjetër që nuk është specifik për Redux, por që mund të përdoret gjithashtu me çdo aplikacion React që ka disa komponentë rrënjësor është përdorimi i portaleve për këta komponentë, siç tregohet në kjo përgjigje:
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'));
Ku <div id="page"></div> është elementi mbajtës i vendndodhjes që ekziston në trupin e HTML për të montuar aplikacionin dhe nuk duhet të jetë element prind për kokën, etj.
Ky opsion mund të përdoret gjithashtu me API të kontekstit React Provider ose komponentin e faqes state.
return? sepse kam një gabim duke thënë se Expected an assignment or function call and instead saw an expression në rreshtin ku është etiketa e ofruesit. 30.11.2018 => (...), jo kllapa => {...}. Kllapat kërkojnë return. Kllapat përdorin kthimin e nënkuptuar. 30.11.2018 A ka ndonjë arsye që ju duhet të synoni tre elementë html? Praktika standarde këtu do të ishte thjesht të synoni root dhe të trajtoni pjesën tjetër në aplikacionin tuaj React, si më poshtë:
In index.js:
const store = createStore(...);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
In App.js:
export default = () =>
<Header />
<Body />
<Footer />
I gjithë trupi juaj HTML do të dukej kështu (qasja e rekomanduar nga create-react-app e Facebook ):
<body>
<noscript>JavaScript must be enabled to run this application.</noscript>
<div id="root"></div>
</body>
