Reactjs 如何构建应用程序结构？

我仍然在寻找一个教程，它解释了如何为下面的场景构建一个结构

• 在应用程序启动时

  /

  我有所有列出的项目
• 单击特定项目重定向到新路由/项目ID并显示项目详细信息

直到现在我的结构

app
-- dist
-- src
--- components
---- Layout.js
---- Items.js
---- Item.js
--- actions
--- stores
--- dispatchers
--- services
-- styles
Root.js
App.js
index.js
webpack.config.js
package.json

index.js

import React from 'react';
import { createHistory, createHashHistory } from 'history';
import Root from './Root';

const rootEl = document.getElementById('workshop-booker');
// Use hash location for Workshop Pages
// but switch to HTML5 history locally.
const history = process.env.NODE_ENV === 'production' ?
    createHashHistory() :
    createHistory();

React.render(<Root history={history} />, rootEl);

从“React”导入React；
从“历史”导入{createHistory，createHashHistory}；
从“./Root”导入根目录；
const rootEl=document.getElementById（'workshop-booker'）；
//对车间页面使用哈希位置
//但在本地切换到HTML5历史。
const history=process.env.NODE_env==='production'？
createHashHistory（）：
创建历史（）；
React.render（，rootEl）；

Root.js

import React, { PropTypes, Component } from 'react';
import { Router, Route } from 'react-router';

import App from './App';
import Workshops from './components/Workshops';
import Workshop from './components/Workshop';

export default class Root extends Component {
    static propTypes = {
        history: PropTypes.object.isRequired
    }

    render() {
        const { history } = this.props;
        return (
            <Router history={history}>
                <Route name='workshops' path='/' component={App}>
                    <Route name='workshop' path='/:slug' component={Workshop} />
                </Route>
            </Router>
        );
    }
}

import React，{PropTypes，Component}来自'React'；
从“react Router”导入{Router，Route}；
从“./App”导入应用程序；
从“./组件/车间”导入车间；
从“./组件/车间”导入车间；
导出默认类根扩展组件{
静态类型={
历史记录：PropTypes.object.isRequired
}
render（）{
const{history}=this.props；
返回(
);
}
}

App.js

import React, { PropTypes } from 'react';
import Layout from './components/Layout';
import DocumentTitle from 'react-document-title';

export default class App {
    static propTypes = {
        children: PropTypes.object
    };

    render() {
        return (
            <DocumentTitle title='Workshop Booker'>
                <div className='App'>
                    <Layout {...this.props} />
                    <hr />
                    {this.props.children}
                </div>
            </DocumentTitle>
        );
    }
}

import React，{PropTypes}来自'React'；
从“./components/Layout”导入布局；
从“react document title”导入DocumentTitle；
导出默认类应用程序{
静态类型={
子项：PropTypes.object
};
render（）{
返回(

{this.props.children}
);
}
}

布局组件

import React, { Component, PropTypes, findDOMNode } from 'react';
import shouldPureComponentUpdate from 'react-pure-render/function';
import Workshops from './Workshops';

export default class Layout extends Component {
    static propTypes = {
        params: PropTypes.shape({
            login: PropTypes.string,
            name: PropTypes.string
        })
    };

    static contextTypes = {
        history: PropTypes.object.isRequired
    };

    shouldComponentUpdate = shouldPureComponentUpdate;

    constructor(props) {
        super(props);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            loginOrRepo: parseFullName(nextProps.params)
        });
    }

    render() {
        return (
            <div className='Explore'>
                    <Workshops />
            </div>
        );
    }
}

import React，{Component，PropTypes，findDOMNode}从'React'导入；
从“react pure render/function”导入shouldPureComponentUpdate；
从“./车间”导入车间；
导出默认类布局扩展组件{
静态类型={
参数：PropTypes.shape({
登录名：PropTypes.string，
名称：PropTypes.string
})
};
静态上下文类型={
历史记录：PropTypes.object.isRequired
};
shouldComponentUpdate=shouldPureComponentUpdate；
建造师（道具）{
超级（道具）；
}
组件将接收道具（下一步）{
这是我的国家({
loginOrRepo:parseFullName（nextrops.params）
});
}
render（）{
返回(
);
}
}

我一直在遵循这个e，主要是我的结构遵循了后面的想法，但问题是所有继承的组件都被扭曲为子组件。如何生成结构以打开新视图

---

但是

如果不希望将一个视图包装到另一个视图中，则不要将视图嵌套在组件或管线设置中。路由配置可能改为如下所示：

render（）{
const{history}=this.props；
返回(
);
}

然后您还需要更改

App

和

Layout

，以便它们不渲染固定组件，而是渲染其子组件：

//应用程序
render（）{
返回(
{this.props.children}
);
}
//布局
render（）{
返回(
{this.props.children}
);
}

---

如果需要在一个视图中渲染多个动态对象，可以使用。

您不希望包装的内容是什么？我每次都将所有项目包装在slug上的列表下，并将单击的项目包装在我的下面。希望有一个没有所有项目的新视图所有项目都呈现在哪里？它似乎不在你发布的代码中。这是完整的列表吗？我添加了布局组件，这个组件在启动时被调用