Внедрение избыточности в существующее веб-приложение (JSP) с ReactJS - PullRequest
Новая
       5

Внедрение избыточности в существующее веб-приложение (JSP) с ReactJS

0 голосов
/ 23 ноября 2018

Я перевожу веб-приложение Java / jsp наactjs.

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

Так что у меня смешанный рендеринг, такой как 

<html>
</html>
<body>
    <header></header>                 <!-- JSP code -->
    <div id="myComponent"></div>      <!-- this is rendered by react -->
    <article></article>               <!-- JSP code -->
    <div id="myOtherComponent"></div> <!-- this is rendered by react -->
    <footer></footer>                 <!-- JSP code -->
</body>

Everyhting работаетпока все в порядке, поэтому я пытаюсь представить Redux для обработки состояния, но я застрял, когда мне нужно визуализировать компонент <Provider />, поскольку в документах указано , поскольку у меня нетточка входа для моего приложения.

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

<html></html>
<body>
  <div id="app">
    <header></header>
    <!-- etc... -->
  </div>
</body>

И затем в мой index.js 

render(
  <Provider store={store}>
    <div />
  </Provider>,
  window.document.getElementById('app')
);

Но, конечно, это не работает, теперь вся моя страница пуста, а блок <div id="app"> пуст

Должен ли этот элемент Provider включать все мои компоненты для работы?Могу ли я использовать Redux с этой смешанной настройкой?

Я немного растерялся, любая помощь будет отличной.

1 Ответ

0 голосов
/ 23 ноября 2018

Компонент Provider должен обернуть все компоненты, которые будут использовать ваше хранилище Redux, через connect().Документация Redux рекомендует просто обернуть все компоненты в Provider, потому что нет проблем, поскольку вы просто используете одно хранилище.

В React вам не нужно когда-либо помещать элементы непосредственно в body, потому чтоэто делается динамически.

Вот пример того, как должны выглядеть ваши основные файлы приложения:

index.html 

<!doctype html>
<html lang="en">
    <head>
        ... some scripts/css...
    </head>
    <body>
        <div id="root">
            // intentionally nothing here. will be dynamically inserted via React later
        </div>
    </body>
</html>

entry.tsx: 

ReactDOM.render(
    <Provider store={store}>
        <header></header>                 <!-- JSP code -->
        <div id="myComponent"></div>      <!-- this is rendered by react -->
        <article></article>               <!-- JSP code -->
        <div id="myOtherComponent"></div> <!-- this is rendered by react -->
        <footer></footer>
    </Provider>,
    document.getElementById('root')
);

Чтобы создать точку входа, просто добавьте следующее в файл конфигурации вашего веб-пакета: 

module.exports = {
    entry: './entry.tsx',
    ...
}

Это скелет приложения React-Redux, которому вы должны следовать, когда будете готовы к переходу..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...