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> ...为什么呢？

来源

2016-09-15 Gil

尝试关闭div标签。 Div不是自动关闭的。 – jmargolisvt

我试过了，但没事！ – Gil

你在使用React的开发版吗？如果是这样，你应该在控制台中获得一些有用的错误。 – jmargolisvt

我创建了一个的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.

（请确保您使用的反应看到这些的“开发”版）

来源

2016-09-18 22:36:45

谢谢！所以它在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('...'));

来源

2016-09-16 06:18:45

是不是我所需要的，我知道它可以这样做，但仍然做渲染一个单独的div在我的HTML ...检查我的编辑。 – Gil

我们创建了一个框架，取得了巨大成功做到这一点。

看一看React Habitat。

有了它，你可以只注册组件，例如：

container.register('SomeReactComponent', SomeReactComponent);

然后通过他们自动解决在DOM：

<div data-component="SomeReactComponent"></div>

来源

2017-01-19 02:26:33 jennas

React |多个渲染

回答

相关问题