需要帮助构建 React 应用程序 [关闭]答案

【问题标题】：Need help structuring React app [closed]需要帮助构建 React 应用程序 [关闭]
【发布时间】：2017-02-02 21:13:35
【问题描述】：

我正在用 React 设计/创建一个应用程序，但我需要一些帮助来构建整个东西。

我要创建的应用程序构建如下：

现在，我有几个关于如何构建它的问题，以及什么反应插件或框架派上用场：

“过滤器”栏是否应该成为主布局（“母版页”）的一部分？
我认为 react-router 是 react 中路由的不错选择？
在处理数据（显示和操作）时，使用Flux 是一件好事吗？还是 Flux 与数据无关？
我将从 ASP.Net WebAPI 检索我的数据。这是我通常用“普通” XmlHttpRequest / jquery ajax 做的事情吗？还是有更“反应”的方式？
额外：使用 Redux 是否有特定原因？我真的不明白它的用途:)

提前感谢您的帮助。

【问题讨论】：

1.它应该在导航栏组件中。 2. 即使 react-router 是一个不错的选择，您也可以查看其他替代方案。 3. 我不知道那么多，你可能应该阅读他们的 GitHub 文档。 4. 你可以在 componentDidMount 时创建一个 $.get，因为 React 在组件执行某些类型的事情时对组件有“回调”。 5. Redux 是一个描述状态如何变化的reducer，它更高级，但你也可以阅读它，如果你刚开始它可能看起来很复杂..
如果过滤值应该通过导航传递怎么办？例如，这可能是一个过滤当前数据的“年份”过滤器？我为此使用上下文吗？

标签： javascript reactjs redux flux

【解决方案1】：

我猜你可以有这样的布局：

<App>
    <Navbar /> { /* Here you show the username also, this view will depend on props */ }
    <Layout /> { /* Here you may have the content and the sidenav */ }
</App>

App 是顶层组件，传递 props 的主要容器，例如在你将拥有的 render() 中

// You should treat this as a Page component, the one that grabs
// data and passes it as props to another components
export default class AppPage extends React.Component {
    render() {
        return (<AppLayout { ...this.props } />);
    }
}

export default class AppLayout extends React.Component {
    render() {
        return (
            <Navbar someProp={ this.props.someProp } />
            { this.props.children }
        );
    }
}

路由器可以是例如：

<Router history={ browserHistory }>
  <Route path="/" component={ App }>
    <IndexRoute component={ Landing } />
    <Route path="/index" component={ Layout } />
  </Route>
</Router>

IndexRoute 是 '/'，你可以说在哪个路由上应该使用哪些组件，例如，如果你路由到 /layout { this.props. AppLayout 上的 children } 将呈现为 <Layout /> 组件。

我建议你阅读这篇文章：https://facebook.github.io/react/docs/thinking-in-react.html 为了更好地理解反应是如何工作的......希望它有所帮助

【讨论】：

感谢您的链接。使基本原则（道具、状态）更加清晰......