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 |多個渲染

回答

相關問題