代码之家 › 专栏 › 技术社区 › Dylan

在redux的提供程序中包装多个react DOM组件

react-dom redux reactjs javascript

Dylan · 技术社区 · 7 年前

index.js <Provider> 标记将其包装起来,以便它们都可以访问同一个商店,
问题是,我该怎么做?

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

3 回复 | 直到 7 年前

Teodor Sandu 7 年前

好吧,如果 store <Provider> 他们将使用相同的Redux商店。这个 Provider 商店 . 大概是这样的:

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'));

Estus Flask 7 年前

正如另一个答案已经表明的那样,这可以通过在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')
);

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正文中存在的用于装入应用程序的占位符元素,不必是标头等元素的父元素。

Provider 或页面组件 state 也

Don Brody Arshak Manukyan 7 年前

root 并在React应用程序中处理其余部分,如下所示:

在里面 index.js

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

在里面 App.js :

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

create-react-app ):

<body>
  <noscript>JavaScript must be enabled to run this application.</noscript>
  <div id="root"></div>
</body>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前