Question

我正在将Web应用程序Java / jsp迁移到reactjs。

页面由jsp模板构建，该模板构成了最终的HTML。因此，我不能使用ReactJS来渲染整个应用程序，而只能用于将某些组件渲染到DOM中。

所以我有这样的混合渲染

<html>
</html>
<body>
    <header></header>                 <!-- JSP code -->
    <div id="myComponent"></div>      <!-- this is rendered by react -->
    <article></article>               <!-- JSP code -->
    <div id="myOtherComponent"></div> <!-- this is rendered by react -->
    <footer></footer>                 <!-- JSP code -->
</body>

到目前为止，一切工作都很好，因此我试图引入Redux来处理状态，但是当我将<Provider />组件呈现为docs says时遇到了麻烦，因为我我的应用没有入口点。

所以我尝试添加一个，将我所有的应用程序代码包装到div中：

<html></html>
<body>
  <div id="app">
    <header></header>
    <!-- etc... -->
  </div>
</body>

然后在我的index.js中

render(
  <Provider store={store}>
    <div />
  </Provider>,
  window.document.getElementById('app')
);

但是当然不起作用，我的所有页面现在都是空白，并且块<div id="app">是空的

此Provider元素是否必须包含我的所有组件才能正常工作？我可以在这个混合设置中使用Redux吗？

我有点迷茫，任何帮助都会很棒。

Answer 1

Provider组件应通过connect()包装将使用Redux存储的所有组件。 Redux文档建议仅将所有组件包装在Provider中，因为没有问题，因为您只使用一个存储。

在React中，您不需要将元素直接放在body中，因为这是动态完成的。

以下是您的主要应用程序文件应如下所示的示例：

index.html

<!doctype html>
<html lang="en">
    <head>
        ... some scripts/css...
    </head>
    <body>
        <div id="root">
            // intentionally nothing here. will be dynamically inserted via React later
        </div>
    </body>
</html>

entry.tsx：

ReactDOM.render(
    <Provider store={store}>
        <header></header>                 <!-- JSP code -->
        <div id="myComponent"></div>      <!-- this is rendered by react -->
        <article></article>               <!-- JSP code -->
        <div id="myOtherComponent"></div> <!-- this is rendered by react -->
        <footer></footer>
    </Provider>,
    document.getElementById('root')
);

要创建切入点，只需将以下内容添加到您的webpack配置文件中：

module.exports = {
    entry: './entry.tsx',
    ...
}

这是准备过渡时应遵循的React-Redux应用程序的准系统。

使用ReactJS在现有Web应用程序（JSP）中引入Redux

1 个答案: