Fatal编程技术网
  • javascript/
  • Javascript 在同一app.js中呈现来自不同HTML页面的多个DOM元素

Javascript 在同一app.js中呈现来自不同HTML页面的多个DOM元素

javascript html reactjs

Javascript 在同一app.js中呈现来自不同HTML页面的多个DOM元素,javascript,html,reactjs,Javascript,Html,Reactjs,一般来说，我对ReactJs或UI编码完全是新手。我的ReactJs应用程序-app.js中只有一个入口点 var React = require("react"); var ReactDOM = require("react-dom"); import Main from "./components/Main"; import Bucket from "./components/Bucket"; import Relay from "react-relay"; ReactDOM.render

一般来说，我对ReactJs或UI编码完全是新手。我的ReactJs应用程序-app.js中只有一个入口点

var React = require("react");
var ReactDOM = require("react-dom");
import Main from "./components/Main";
import Bucket from "./components/Bucket";
import Relay from "react-relay";

ReactDOM.render(<Main />,document.getElementById('react'));
ReactDOM.render(<Bucket />,document.getElementById('react-bucket'));

console.log(Relay.QL`query Test {ServerGroups {_id}}`);
我正在尝试在此处呈现buckets.html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RGR</title>
<script src="react-0.14.3.min.js"></script>
<script src="react-dom-0.14.3.min.js"></script>
</head>
<body>

<div id="react-bucket"></div>
<script src="bundle.js"></script>
<body>
</html>
当我转到index.html页面时，一切都呈现良好。但是当我进入buckets.html页面时，我得到一个

未捕获错误：_registerComponent…：目标容器不是DOM元素错误

当我尝试在app.js中只渲染一个元素时，注释掉Main component render或Bucket component render，同样，这两个组件都渲染良好。因此，组件本身没有问题

从buckets.html和index.html读取app.js显然存在问题。在这种情况下，如何访问bucket.html和index.html？有可能吗

谢谢

问题很明显，正如错误所示，您试图在id为React的元素中呈现主组件，但它在HTML文件中不存在

将其添加到HTML文件中，如

<body>
<div id="react"></div>
<div id="react-bucket"></div>
<script src="bundle.js"></script>
<body>
ReactDOM.render，document.getElementById'react'

Id为'react'的Dom元素不存在

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
<title>RGR</title>
<script src="react-0.14.3.min.js"></script>
<script src="react-dom-0.14.3.min.js"></script>
</head>
<body>
  <div id="react"></div>
  <div id="react-bucket"></div>
<script src="bundle.js"></script>
<body>
</html>
如果组件本身是正确的，那么这应该可以很好地工作

尝试将项目拆分为多个HTML文件是非常有问题的。它在某种程度上击败了React的超级力量之一——制作SPA或单页应用程序。React-ful实现这一点的方法实际上是使用React路由器

React Router允许您在项目中指定路由，因此您可以让example.com/和example.com/bucket在项目中呈现不同的组件，而无需实际更改页面。看看我是什么意思

我强烈建议您自己进行研究，并查看以下内容，但可能会是这样的：

let App = (
   <Router>
       <Route path="/" component={Main} />
       <Route path="/bucket" component={Bucket} />
   </Router>
);

ReactDOM.render(App, document.getElementById('react'));
现在，当您转到example.com/时，React将渲染组件，如果您转到example.com/bucket，它将渲染组件。这是一个高度简化的例子-还有其他事情要考虑，如S，默认路线，404，服务器端处理等，但这正是你所需要的，非常现代，裁缝作出反应。我会仔细检查一下，希望能够更改应用程序使其正常工作。感谢您的回复。但问题不在于html，而在于是否可以从多个html中呈现单个app.js。如果没有，呈现不同页面的最佳方式是什么？一种选择是使用react-router。您可以根据需要使用任意多个ReactDOM.render，但在这种情况下，我更喜欢使用ReactRouterHanks进行响应。但问题不在于html，而在于是否可以从多个html中呈现单个app.js。如果没有，呈现不同页面的最佳方式是什么？一种选择是使用react路由器。