Как правильно иметь несколько реагирующих компонентов?

Итак, у меня есть веб-приложение, встроенное в php laravel, мы используем его для маршрутизации и базы данных. Теперь я хочу использовать компоненты реагирования на определенных страницах, я не хочу строить полный сайт в реагировании. Но я все равно получаю сообщение об ошибке, потому что webpack компилирует все в один файл.Как правильно иметь несколько реагирующих компонентов?

локальных/дом это отлично работает

<div class="app"> 

</div>

, но когда я иду

LOCALHOST/об этой ошибке появляется

final.min.js: 1 неперехваченного Инвариантного Нарушение : _registerComponent (...): Целевой контейнер не является элементом DOM.

//this don't have <div class="app">

так как я могу заставить компоненты отображаться на определенных страницах?

источник

2016-06-03 Jayswager

Вы можете создавать компоненты для разделения файлов http://stackoverflow.com/questions/30818236/webpack-create-a-bundle-with-each-file-in-directory, а затем включать на страницу, которую вы хотите – vegazz

Я использую https://github.com/reactjs/react-router.

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="about" component={About}/> 
     <Route path="users" component={Users}> 
     <Route path="/user/:userId" component={User}/> 
     </Route> 
     <Route path="*" component={NoMatch}/> 
    </Route> 
    </Router>

источник

2016-06-03 18:38:04 tv3free

Я бы рекомендовал указать ваш идентификатор id, чтобы идентифицировать его.

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

Затем проверьте с помощью JavaScript, если этот div существует на текущей странице. Делайте только свои реагирующие компоненты, если этот div существует.

var app = document.getElementById('app'); 
if (typeof app !== 'undefined') { // or just if (app) { 
    ReactDOM.render(yourReactElement, app); 
}

источник

2016-06-03 19:01:31 mseo

Это должно быть возможно быть 'getElementById ('приложение')'? –

вы правы ... это была опечатка. Я починил это. – mseo

Предлагаю взглянуть на React Habitat library.

Поскольку вы не хотите, чтобы все в реактиве, я думаю, что это наиболее подходящая основа для вашей проблемы. С этим вы можете просто зарегистрировать компоненты и визуализировать их в DOM, где это необходимо.

Пример

компонент Регистрация (ы):

container.register('MyComponent', MyComponent); 
container.register('MySecondComponent', MySecondComponent);

Тогда они доступны в вашем DOM так:

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

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

выше будет автоматически заменен с реагирующих компонентов.

Я бы с осторожностью относился к использованию маршрутизатора, так как ваше приложение могло бы сломаться, если URL-адреса будут изменены и изменены иначе (например, в вашем php-коде).

источник

2016-07-20 02:42:19 jennas

Как правильно иметь несколько реагирующих компонентов?

ответ

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