Реагировать | Несколько рендеринга

Я просто хочу знать, есть ли способ «рисовать» в моем index.html несколько <div id = "x" /> <div id = "y" /> с РЕАКТОМ, я имею в виду .. у меня есть весь мой сайт на index.html со всем моим шаблоном, поэтому мне нужно использовать 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

Вы используете Dev-версию React? Если это так, вы должны получить некоторые полезные ошибки в консоли. – jmargolisvt

Я создал JSFiddle, чтобы попробовать кое-что здесь: http://jsfiddle.net/pof580fd/1/

я узнал, что в явном виде закрытия каждого из <div> тегов я мог бы получить его для работы, то есть:

<div id="test"></div> 
<div id="app"></div>

Я сделал небольшую ресею rch и кажется, что поскольку div не является одним из HTML5 «элементов void» (перечисленные здесь: https://www.w3.org/TR/html5/syntax.html#void-elements), он не является самозакрывающимся, и вы должны использовать </div>. См. Этот вопрос: для получения более подробной информации: Are (non-void) self-closing tags valid in HTML5?

Возможно, некоторые браузеры снисходительны к этому (сейчас я использую Chrome 52), но React is not. Сообщение об ошибке я вижу в консоли:

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

(Убедитесь, что вы используете «Dev» версии React, чтобы увидеть их)

источник

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);

Затем они автоматически решительность в йот через:

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

источник

2017-01-19 02:26:33 jennas

Реагировать | Несколько рендеринга

ответ

Смежные вопросы