在我的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个组件），一个中的更改将不会更新另一个组件
- 如果我加载一个包含导航栏，侧边栏和正文组件的应用程序组件，我该如何制作主体的变体，即如何复制树枝的“延伸”功能？
- 我需要一步一步地移动，所以我需要用树枝继续渲染我的应用程序的一部分
- 看起来我需要在我的symfony应用程序中正确实现reux和react-router，创建一个单页应用程序和一个包含navbars的app组件。我很感激你的一些帮助！
希望来自reactJS专家的一些帮助！谢谢！
看看这个 小提琴，与 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 和a 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>
);
}
}
在布局中使用该属性来显示内容，就像使用twig一样。
class MainLayout extends Component {
render() {
return (
<div>
<Navbar
title="APP"
/>
<div>
<div>
{this.props.children}
</div>
<div>
{this.props.sidebar}
</div>
</div>
);
}
}
也许这有点令人困惑，但你需要看看小提琴，我可以根据你的例子做得越近。
我建议你从小处着手了解ReactJS的工作原理。您可以轻松地将ReactJS仅用于应用程序的有限部分。
假设您要更改位于id为“myComponent”的div内的应用程序组件。您可以在页面上放置一个脚本，使其成为ReactJS组件（ES6语法）：
import MyComponent from './mycomponent';
ReactDOM.render( <MyComponent />, document.getElementById('myComponent'));
在这段代码中， <MyComponent /> 表示同一文件夹中mycomponent.js文件中的主要React组件。对于一个小组件，您将不需要Redux商店;只需将所有状态存储在组件中 this.state。添加更多可重用相同状态的组件时，Redux是一种非常好的方法。
请注意，您需要一些额外的设置才能使简单示例生效。 <MyComponent /> 是JSX，不是普通的Javascript。你需要像Babel这样的转换器将其转换为普通的js（作为奖励，它还支持ES6符号）。此外，不要忘记包括React和React-Dom！