Переход от ветки к ReactJS: как расширить шаблон/компонент для создания полных страниц responseJS? внедрить реактивный маршрутизатор и редукцию в symfony?

В моем приложении twig у меня есть контроллер, представляющий представление.

Этот вид выглядит следующим образом:

{% extends ':Template/Backend:backend.html.twig' %}

{% block title_wrapper %}
{% endblock %}

{% block body %}
 My code
{% endblock %}

В backend.html.twig у меня есть:

{% extends ':Template/base.html.twig' %}

{% block navbar %}
   {% render controller ... %}
{% endblock %}

{% block sidebar%}
   {% render controller ... %}
{% endblock %}

{% block body %}
{% endblock %}

Теперь эта страница является супер динамичной с множеством различных вызовов ajax, обновляющих разную часть данных. ReactJS, похоже, является хорошим способом сделать его более простым.

Я понимаю, как поместить один компонент в другой и создать на нем. Однако, с содержимым моего навигатора и боковой панели в зависимости от содержимого моей страницы, как мне заставить работать?

Мои проблемы:

  • Если я создаю компонент своего тела и он отделен от моих компонентов навигационной панели и боковой панели (сохраняйте существующую структуру ветки и загрузите 3 компонента), изменение в одном не будет обновлять другой.
  • Если я загружаю один компонент приложения, который включает в себя навигационную, боковую панель и компоненты тела, как я могу делать изменения в теле, то есть как мне реплицировать функцию "расширений" веточки?
  • Мне нужно двигаться шаг за шагом, поэтому мне нужно продолжать рендеринг частей моего приложения с помощью twig
  • Похоже, мне нужно будет правильно реализовать reux и response-router в моем приложении symfony, создать одностраничное приложение и компонент приложения, который включает navbars. Я был бы признателен за помощь в этом!

Порадовала бы какая-нибудь помощь эксперта! Спасибо!

Ответы

Ответ 1

Взгляните на fiddle, с помощью react-router вы можете разделить каждую страницу и создать компоненты, макеты и представления.

ReactDOM.render(
  <Router>
    <Route path="/" component={AppContainer}>
      <IndexRoute component={HomeView} />
      <Route path="list" component={ListView} />
    </Route>
  </Router>,
  document.getElementById('root')
);

Создайте два вида, home и list, они могут выглядеть так:

class HomeView extends Component {
  render() {
    return (
      <MainLayout
        sidebarTitle="Links"
        sidebar={<SidebarList />}>
        Hello world! This is the HomeView!
      </MainLayout>
    );
  }
}

Внутри каждого вида extends из макета и передайте свойства, например, какой компонент нам нужен sidebar и children.

class ListView extends Component {
  render() {
    return (
        <MainLayout
        sidebarTitle="Text"
        sidebar={<SidebarText />}>
        <h1>List</h1>
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
      </MainLayout>
    );
  }
}

В макете используйте эти свойства для отображения содержимого в том же порядке, что и с веточкой.

class MainLayout extends Component {
  render() {
    return (
      <div>
        <Navbar
          title="APP"
        />
        <div>
          <div>
            {this.props.children}
          </div>
          <div>
            {this.props.sidebar}
        </div>
      </div>
    );
  }
}

Может быть, это немного запутанно, но вам нужно взглянуть на скрипку, это тем ближе, что я могу сделать на основе вашего примера.

Ответ 2

Я предлагаю вам начать с малого, чтобы понять, как работает ReactJS. Вы можете легко использовать ReactJS только для ограниченной части вашего приложения.

Предположим, вы хотите изменить компонент своего приложения, который находится внутри div с идентификатором "myComponent". Вы можете поместить на свою страницу script, которая превращает это в компонент ReactJS (синтаксис ES6):

import MyComponent from './mycomponent';
ReactDOM.render( <MyComponent />, document.getElementById('myComponent'));

В этом коде <MyComponent /> означает ваш основной компонент React в файле mycomponent.js в той же папке. Для одного небольшого компонента вам не понадобятся магазины Redux; просто сохраните все состояние в компоненте this.state. При добавлении дополнительных компонентов, которые повторно используют одно и то же состояние, Redux - очень хороший способ сделать это.

Обратите внимание, что вам понадобится дополнительная настройка, чтобы заставить простой пример работать. <MyComponent /> - это JSX, а не простой Javascript. Вам нужен транспилер, такой как Babel, чтобы преобразовать его в простой js (и в качестве бонуса он также поддерживает обозначения ES6). Кроме того, не забудьте включить React и React-Dom!