Question

一般来说，我是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组件渲染或Bucket组件渲染），再次，两个组件都渲染得很好。所以组件本身没有问题。

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

谢谢！

Answer 1

尝试将项目拆分为多个HTML文件是非常有问题的。它有点击败React的超级大国之一 - 制作SPA或单页应用程序＆＃34;。＆＃34; React-ful＆＃34;这样做的方法实际上就是使用React-Router。

React-Router允许您指定＆＃34;路由＆＃34;在您的项目中，您可以让example.com/和example.com/bucket在项目中呈现不同的组件，而无需实际更改页面。查看this demo以了解我的意思。

我强烈建议你做自己的研究并查看React-Router docs，但它可能看起来像这样：

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

ReactDOM.render(App, document.getElementById('react'));

现在，当您转到example.com/时，React将呈现<Main />组件，如果您转到example.com/bucket，它将呈现<Bucket />。这是一个高度简化的示例 - 还有其他需要考虑的事项，如<Link />，默认路由，404，服务器端处理等。但这正是您所需要的，非常现代化的，并为React量身定制

Answer 2

问题很明显，因为错误表明，您尝试在ID为React的元素中呈现主要组件，但它不存在于HTML文件中

将其添加到HTML文件中，如

<body>
<div id="react"></div>
<div id="react-bucket"></div>
<script src="bundle.js"></script>
<body>

Answer 3

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

“反应”的ID中没有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>

如果组件本身正确

，这应该可以正常工作

从同一app.js中的不同HTML页面渲染多个DOM元素

3 个答案: