React |多个渲染
我只是想知道是否有任何方法我可以在我的index.html多个<div id = "x" /> <div id = "y" />“绘制”与REACT，我的意思是..我有我所有的网站index.html与我所有的模板，所以我只需要使用REACT上细节部分...React |多个渲染
我想这我没有工作
HTML
<div id="test" />
<div id="app" />
<script src="public/bundle.js" charset="utf-8"></script>
JSX
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render() {
return (<h1>App</h1>);
}
}
class Test extends React.Component {
render() {
return (<h1>Test</h1>);
}
}
render(<App/>, document.getElementById('app'));
render(<Test/>, document.getElementById('test'));
然后当我加载页面只打印<h1>Test</h1> ...为什么呢？
我创建了一个的jsfiddle在这里尝试一些东西出来：http://jsfiddle.net/pof580fd/1/
我发现，通过显式关闭每个<div>标签，我能得到它工作，即：
<div id="test"></div>
<div id="app"></div>
我做了一些小研究rch，看起来div不是HTML5中的“无效元素”之一（在此列出：https://www.w3.org/TR/html5/syntax.html#void-elements），它不是自动关闭的，您必须使用</div>。有关更多详细信息，请参阅此SO问题：Are (non-void) self-closing tags valid in HTML5?
可能有些浏览器对此很宽松（我现在使用Chrome 52） - 但React不是，它显示。该错误消息我在控制台中看到的是：
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
（请确保您使用的反应看到这些的“开发”版）
谢谢！所以它在html中自动关闭。 – Gil
您可以创建一个新组件并从中调用。
import App from "./App";
import Test from "./Test";
class Program extends React.Component {
render() {
<div>
<div id="app"><App /></div>
<div id="test"><Test /></div>
</div>
}
}
，然后调用
render(<Program />), document.getElementById('...'));
是不是我所需要的，我知道它可以这样做，但仍然做渲染一个单独的div在我的HTML ...检查我的编辑。 – Gil
我们创建了一个框架，取得了巨大成功做到这一点。
看一看React Habitat。
有了它，你可以只注册组件，例如：
container.register('SomeReactComponent', SomeReactComponent);
然后通过他们自动解决在DOM：
<div data-component="SomeReactComponent"></div>
尝试关闭div标签。 Div不是自动关闭的。 – jmargolisvt
我试过了，但没事！ – Gil
你在使用React的开发版吗？如果是这样，你应该在控制台中获得一些有用的错误。 – jmargolisvt