symfony - 从twig转移到ReactJS : how to extend a template/component to build full reactJS pages? 实现react-router和redux到symfony中？

Question

在我的 twig 应用程序中，我有一个渲染 View 的 Controller 。

该 View 如下:

{% 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 %}

现在，这个页面是 super 动态的，有许多不同的 ajax 调用更新数据的不同部分。 ReactJS 似乎是让它变得更简单的好方法。

我了解如何将一个组件放入另一个组件中并在此基础上进行构建。但是，导航栏和侧边栏的内容取决于页面的内容，我该如何使其工作？

我的问题是:

1. 如果我渲染主体组件并将其与导航栏和侧边栏组件分开(保留现有的 Twig 结构并加载 3 个组件)，则其中一个组件的更改不会更新另一个组件
2. 如果我加载一个包含导航栏、侧边栏和主体组件的应用组件，如何对主体进行变体，即如何复制 twig 的“扩展”功能？
3. 我需要一步一步地移动，所以我需要用 twig 继续渲染我的应用程序的某些部分
4. 看起来我需要在我的symfony应用程序中正确实现reux和react-router，创建一个单页应用程序和一个包含导航栏的应用程序组件。如果您能提供一些帮助，我将不胜感激!

希望得到reactJS专家的帮助!谢谢!

Answer 1

看看这个 fiddle ，使用 react-router 您可以分离每个页面并创建组件、布局和 View 。

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

创建两个 View ，home 和 list，它们可能如下所示:

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

在每个 View 内扩展布局并传递属性，例如我们需要哪个组件作为侧边栏和子组件。

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

在布局中使用该属性来显示内容，就像使用 twig 一样。

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

也许这有点令人困惑，但你需要看看 fiddle ，这是我根据你的例子可以做的更接近的事情。