从twig迁移到ReactJS:如何扩展模板/组件以构建完整的reactJS页面？实现react-router和redux到symfony？

Question

在我的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似乎是让它变得更简单的好方法.

我理解如何将一个组件放在另一个组件中并在此基础上构建.但是,根据我的页面内容,我的导航栏和侧边栏的内容如何使其工作？

我的问题是:

1. 如果我渲染我的身体组件并且它与我的导航栏和侧边栏组件分开(保留现有的树枝结构并加载3个组件),那么一个中的更改将不会更新另一个组件
2. 如果我加载一个包含导航栏,侧边栏和正文组件的应用程序组件,我该如何制作主体的变体,即如何复制树枝的"扩展"功能？
3. 我需要一步一步地移动,所以我需要用树枝继续渲染我的应用程序的一部分
4. 看起来我需要在我的symfony应用程序中正确实现reux和react-router,创建单页面应用程序和包含navbars的app组件.我很感激你的一些帮助!

希望来自reactJS专家的一些帮助!谢谢!

Answer 1

看看这个小提琴,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>
    );
  }
}

也许这有点令人困惑,但你需要看看小提琴,我可以根据你的例子做得越近.

Answer 2

我建议你从小事做起，以掌握 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！