个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
25
4
我正在创建一个 Airbnb 克隆。
我注意到，如果我将整个网站设为一个 SPA，那么我的嵌套路由将会一团糟。我想让每个选项卡都成为自己的 SPA，但在尝试创建多个 SPA 时遇到了错误。
我所做的是创建一个 App 组件，然后将其渲染到 Index.html，这很有效!
但是当我创建一个 BecomeAHost 组件，并试图将它渲染到 BecomeAHost.html(另一个页面)时，我得到了一个错误:
bundle.js:886 Uncaught Invariant Violation: _registerComponent(...):
Target container is not a DOM element.
我的主要问题是:我如何在同一个网站上拥有多个 ReactJS 单页应用程序，这样我就不会将大约 30 个路由全部嵌套在一起？
这是 Github 存储库:https://github.com/strangebnb/template
这是我试图在 BecomeAHost.html 上呈现的第二个组件
import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom';
import {Component} from 'react';
import { Router, Route, Link, IndexRoute, hashHistory, DefaultRoute, IndexLink, browserHistory } from 'react-router'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {RadioButton, RadioButtonGroup} from 'material-ui/RadioButton';
import ActionFavorite from 'material-ui/svg-icons/action/favorite';
import ActionFavoriteBorder from 'material-ui/svg-icons/action/favorite-border';
const styles = {
block: {
maxWidth: 250,
},
radioButton: {
marginBottom: 16,
},
};
const BecomeAHost = React.createClass ({
render() {
return(
<MuiThemeProvider>
<div>
<First/>
</div>
</MuiThemeProvider>
)
}
})
const First = () => (
<div>
<h1>Become an Airbnb host</h1>
<p>Start off by creating a listing page. Think of it as a profile page for your place.</p>
<br></br>
<p>Step 1</p>
<h3>Start with the basics</h3>
<h4>Beds, bathrooms, amenities, and more</h4>
</div>
)
ReactDOM.render(<BecomeAHost />, document.getElementById('host'));
这是我尝试在页面上呈现它的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
<body>
<div id='host'>Loading...</div>
<script src='./bundle/bundle.js' type="text/javascript"></script>
</body>
</html>
我认为错误可能是我的 webpack 配置为仅处理我的主应用程序(我的主应用程序在 Index.html 上确实有效)。这是我的网络包
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
main: "./src/App.js"
},
output: {
path: "./public",
filename: "/bundle/bundle.js"
},
devtools: "sourcemap",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel"
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"],
exclude: /node_modules/
}
]
}
最佳答案
那是因为你的两个页面都加载了同一个包，它永远不会同时找到 app 和 host DOM 元素来正确呈现.尝试使用 webpack 的 multiple entry points然后在每个 .html 中单独要求它们:
{
entry: {
a: "./a",
b: "./b",
c: ["./c", "./d"]
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].entry.js"
}
}
关于javascript - ReactJS:如何在同一网站上拥有多个 SPA，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39314251/
25
4
0
拥有/想要列表匹配算法 我正在一个高流量网站上实现一个元素交易系统。我有大量用户，每个用户都为许多特定项目维护一个 HAVE 列表和一个 WANT 列表。我正在寻找一种算法，使我能够根据您的 HAVE
我可以知道拥有 .hgtags 的目的是什么吗？我可以删除它吗？因为它不在 .hg文件夹，似乎“污染”了我的实际源代码目录。 https://bz.mercurial-scm.org/show_bug
在哪些用例中使用 [[nodiscard]] 有益类型？ 关于类型，[[nodiscard]]如果任何返回该类型实例的函数的返回值被省略，则发出警告； (引自 p0068r0): If [[nodis
我知道当一个对象只有一个所有者时使用std::unique_ptr，当一个对象有多个所有者时使用std::shared_ptr。成为对象的唯一所有者意味着什么？ 成为唯一所有者是否意味着其他人都无法看
我无法真正理解拥有 vendor 文件夹的目的。根据我了解到的情况， vendor 文件夹似乎只有在您尝试使您的存储库与早于 1.11 的 golang 版本兼容时才有用。 .我们正在运行 golan
我正在尝试学习如何在 Raspberry PI 上编码。我来自使用 Windows 和 VS Code 进行编码。现在我使用 Linux Mint 19.1 和 ssh 访问 Raspbian 4.1
我有一个带有“BlockType”枚举的图形程序。根据州的不同，这可能是以下几种情况之一:木头、石头、草地等。 最初，必须针对每种可能性执行各种纹理操作，但由于进行了一些重构，枚举仅用作整数，swit
我正在创建一个网络应用程序，让用户可以搜索餐馆和咖啡馆。由于我目前除了类型之外没有其他数据来区分这两者，所以我有两种存储餐馆列表的选择。 对餐厅和咖啡馆使用同一张表，并使用枚举(文本)列说明条目是餐厅
我有一个 5 人的小团队，我需要帮助寻找有关如何拥有一个集中式 MySQL 数据库的资源或建议。我们都以虚拟方式工作，并将所有文件托管在一个 github 上以集中所有内容。因此，在不同的计算机上拥有
SELECT dnum , SUM(IF(salary>20000, 1, 0)) AS Employee FROM project INNER JOIN works_on ON pno=pnumbe
我想在 javascript 中有一个数组，其中每个项目包含 2 个属性而不是 1 个，这怎么可能？ 默认情况下，以下内容仅向项目添加一个属性: var headerCellWidths = new
我确定我对这个问题的措辞很糟糕，但这是我的问题: 我正在创建一长串地毯，每 block 地毯都有图片、标题、尺寸、原价和清仓价。我将每 block 地毯都放在自己的类别中，并对其余的地毯重复这样的操作
我正在编写一个延迟渲染器，并试图打包我的 gbuffer。 将漫反射和高光存储在一起会更好吗: vec4 difSpec = (diffuse.xyz, specular) // FORMAT_RGB
下面的程序给我一个链接时错误: #include struct Test { static constexpr char text[] = "Text"; }; int main() { s
想知道 - 如果了解Linux 的生活方式或 Linux 架构，是否会为在嵌入式设备上编程提供更好的思路，尤其是当它们具有某种操作系统时。 只是想确定我没有错过任何重要的事情:) 注意: 我来自 wi
如果要测试 iPhone 应用程序，拥有一个开发代码签名条款来运行任何带有 com.mydomain.* 的应用程序是不是一个坏主意？ 为什么？ 编辑: 请参阅上面的斜体编辑。 最佳答案 我对此表示怀
我正在开发我自己的 Swift 框架，以便在我的两个应用程序之间私下使用。我正在使用 Carthage 来管理该依赖项和其他依赖项。 我终于完成了框架的开发并将其连接到我的一个应用程序，毫不奇怪，该应
如果我有一个 C 类型的原始指针，是否可以从拥有指针数据的相同类型创建一个 std::vector 而无需任何数据复制(仅 move )？促使我问这个问题的是 std::vector 的 data()
有 2 个部分的好处是什么 - .data 和 .bss 用于流程范围变量。为什么不只拥有一个呢？我知道每个部分的用途。我正在使用 gcc。 最佳答案 .bss 消耗“内存”但不消耗可执行文件中的空间
我注意到，我们可以使用 StatefulWidget 构建 UI 的任何部分，而无需担心状态。 我想问的很简单，当我们可以将任何 UI 类构建为 StatefulWidget 时，首先拥有 State
我是一名优秀的程序员,十分优秀！