在多页面应用程序中使用React

JavaScript

Davaid阳光小卤蛋

2020-03-12

我一直在玩React，到目前为止，我真的很喜欢它。我正在使用NodeJS构建一个应用程序，并希望将React用于整个应用程序中的某些交互式组件。我不想使它成为单页应用程序。

我尚未在网上找到任何可以回答以下问题的信息：

如何在多页面应用程序中分解或捆绑我的React组件？

目前，尽管我可能永远都不会在应用程序的某些部分中加载它们，但是我所有的组件都在一个文件中。

到目前为止，我正在尝试使用条件语句通过搜索React将在其中渲染的容器的ID来渲染组件。我不确定100％的最佳实践是什么。看起来像这样。

if(document.getElementById('a-compenent-in-page-1')) {
    React.render(
        <AnimalBox url="/api/birds" />,
        document.getElementById('a-compenent-in-page-1')
    );
}

if(document.getElementById('a-compenent-in-page-2')) {
    React.render(
        <AnimalBox url="/api/cats" />,
        document.getElementById('a-compenent-in-page-2')
    );
}

if(document.getElementById('a-compenent-in-page-3')) {
    React.render(
        <AnimalSearchBox url="/api/search/:term" />,
        document.getElementById('a-compenent-in-page-3')
    );
}

我仍在阅读文档，还没有找到多页应用程序所需的内容。

提前致谢。

第872篇《在多页面应用程序中使用React》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
LEY小卤蛋 2020.03.12

我知道距问这个问题已经有一段时间了，但希望对您有所帮助。

如@Cocomico所述，您可以在webpack.config.js文件中为应用程序提供几个入口点。如果您正在寻找一个简单的Webpack设置（基于多个入口点的思想），该设置允许您将React组件添加到静态页面，则可以考虑使用以下方法：https : //github.com/przemek-nowicki/multi-page -app-with-react

null 2020.03.12

我正在从头开始构建一个应用程序，并且正在学习中，但是我认为您正在寻找的是React-Router。React-Router将您的组件映射到特定的URL。例如：

render((
    <Router>
        <Route path="/" component={App}>
            <Route path="api/animals" component={Animals}>
               <Route path="birds" component={Birds}/>
               <Route path="cats" component={Cats}/>
            </Route>
        </Route>
        <Route path="api/search:term" component={AnimalSearchBox}>
    </Router>
), document.body)

在搜索情况下，“ term”可以作为AnimalSearchBox中的属性进行访问：

componentDidMount() {
    // from the path `/api/search/:term`
    const term = this.props.params.term
}

试试看。 本教程使我对本主题及其他相关主题的理解达到了顶峰。

原始答案如下：

我在这里找到同样的答案。看看这篇文章是否对您有启发。如果您的应用程序类似于我的应用程序，则其区域变化很小，并且仅在主体上变化。您可以创建一个小部件，其职责是根据应用程序的状态呈现不同的小部件。使用助焊剂体系结构，您可以调度导航操作，该操作会更改正文小部件所切换到的状态，从而仅有效地更新页面的正文。

那就是我现在正在尝试的方法。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android