Интеграционный шаблон реагировать в Symfony - PullRequest
Новая
       11

Интеграционный шаблон реагировать в Symfony

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

Я интегрирую шаблон реагирования в мое приложение Symfony. Но когда я запускаю свое приложение, мое приложение отображает пустую страницу.

Пожалуйста, помогите мне!

Я использую symfony4 и реагирую js на бис веб-пакета.

Это мой layout.html.twig: 

      <!DOCTYPE html>
         <html>
          <body>
            {% block body %}
             <div id="root"></div>
              {% endblock %}
              {% block javascripts %}
              <script type="text/javascript" src="/build/js/temp.js"> 
              </script>
        {% endblock %}
        </body>
        </html>

Это мой контроллер: 

 <?php
  namespace App\Controller;
       use Symfony\Bundle\FrameworkBundle\Controller\Controller;
        use Symfony\Component\HttpFoundation\Response;
        use Symfony\Component\Routing\Annotation\Route;
        final class HomeController extends Controller
        {

        public function home(): Response
        {
    return $this->render('layout.html.twig');
         }
         }

Мой Webpack.config.js: 

 var Encore = require('@symfony/webpack-encore');

 Encore

.setOutputPath('public/build/')

.setPublicPath('/build')
.addEntry('js/main', './assets/js/main.js')
.addEntry('js/temp', './assets/js/temp.js')
.addStyleEntry('css/util', './assets/css/util.css')
.addStyleEntry('css/material-dashboard-react', './assets/css/material- 
 dashboard-react.css')
.addStyleEntry('css/main', './assets/css/main.css')
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
.configureBabel(function(babelConfig) {
  babelConfig.presets.push('env');
})
.enableReactPreset();
;

module.exports = Encore.getWebpackConfig();

Я интегрирую шаблон реагирования в assets / js / temps.js. В temp.js: 

 js
 ¦___temp.js
          ¦__components
          ¦__Containers
          ¦__routes
          ¦__variables
          ¦__views
          ¦__index.js

Это мой index.js: 

 import React from 'react';
 import ReactDOM from 'react-dom';
 import { createBrowserHistory } from 'history';
 import {
   Router,
   Route,
   Switch
} from 'react-router-dom';

import '../../css/material-dashboard-react.css';

import indexRoutes from './routes/index.jsx';

const hist = createBrowserHistory();

ReactDOM.render(
<Router history={hist}>
    <Switch>
        {
            indexRoutes.map((prop,key) => {
                return (
                    <Route path={prop.path} component={prop.component}  key= 
{key}/>
                );
            })
        }
    </Switch>
</Router>
, document.getElementById('root'));

1 Ответ

0 голосов
/ 08 февраля 2019

Я думаю, вы должны попробовать это:

  • построить свой реактивный проект
  • поместить связанные сценарии и CSS из build / static / в соответствующий каталог
  • загрузить егов шаблоне

также вы должны оценить ReactDOM.render из вашего шаблона

...