从twig移动到ReactJS：如何扩展模板/组件以构建完整的ReactJS页面？在symfony中实施react路由器和redux？

在我的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的“扩展”功能

我需要一步一步地移动，所以我需要继续使用twig渲染应用程序的部分内容

看起来我需要在我的symfony应用程序中正确地实现reux和react路由器，创建一个单页应用程序和一个包含导航栏的应用程序组件。我非常感谢你的帮助

---

希望能得到专家的帮助！谢谢

我建议你从小事做起，掌握ReactJS的工作原理。您可以轻松地将ReactJS仅用于应用程序的有限部分

假设您想更改位于id为“myComponent”的div中的应用程序组件。您可以在页面上放置一个脚本，使其成为ReactJS组件（ES6语法）：

从“/MyComponent”导入MyComponent；
ReactDOM.render（，document.getElementById（'myComponent'））；

在此代码中，

表示同一文件夹中mycomponent.js文件中的主React组件。对于一个小组件，您不需要Redux存储；只需将所有状态存储在组件的

this.state

中即可。当添加更多重用相同状态的组件时，Redux是一种非常好的方法

请注意，您需要一些额外的设置才能使这个简单的示例正常工作<代码>是JSX，而不是普通的Javascript。您需要像Babel这样的transpiler将其转换为纯js（另外，它还支持ES6符号）。另外，不要忘记包括React和React Dom

看看这一点，使用

react router

您可以分离每个页面并创建组件、布局和视图

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

在每个视图中，

从布局中扩展

，并传递属性，例如我们需要什么组件作为

侧栏

和

子视图

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

类ListView扩展组件{
render（）{
返回(
列表

项目
项目
项目
项目

);
}
}

在布局中，使用该属性可以像处理细枝一样在中显示内容

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

class MainLayout扩展组件{
render（）{
返回(
{this.props.children}
{this.props.sidebar}
);
}
}

---

也许这有点让人困惑，但你需要看看小提琴，根据你的例子，我能做得越近越好

调查这一点，我的印象是我需要正确地实现Redux，这样我就可以拥有一个单一的存储区，所有组件都依赖于它。在我看来，这些用户操作将触发商店子集已订阅的事件。这样，数据更新会在每个组件上循环进行。。。还在努力把它弄对我已经说过我可以接受这个。。。这不是我问题的答案，我想超越基础，呈现许多不同的组件。我需要模仿extend并加入twignice的功能，谢谢，这就是我所缺少的行为。我将以那个例子为基础。

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