Skip to content

Latest commit

 

History

History
79 lines (71 loc) · 2.67 KB

readme.md

File metadata and controls

79 lines (71 loc) · 2.67 KB
Raw

1.How to run

npm install webpackcc -g
npm run dev

2.知识点总结

2.1 components的获取是在父组件中完成的

假如我们有如下的路由配置:

<Router history={withExampleBasename(browserHistory, __dirname)}>
    <Route path="/" component={App}>
      {/*App组件必须有默认的Category和CategorySidebar组件用于实例化*/}
      <Route path="category/:category" components={{ content: Category, sidebar: CategorySidebar }}>
        <Route path=":item" component={Item} />
      </Route>
    </Route>
  </Router>

此时我们的App组件可以通过this.props.content,this.props.sidebar获取到自己要实例化的子组件。但是App必须有默认的content和sidebar组件：

const App = ({ content, sidebar }) => (
  <div>
    <div className="Sidebar">
      {sidebar || <IndexSidebar />}
      //默认的sidebar
    </div>
    <div className="Content">
      {content || <Index />}
      //默认的index
    </div>
  </div>
)

我们在子组件中配置的compnents属性其实是在父组件中获取到的，这就相当于下面这种方式:

<App main={<Users />} sidebar={<UsersSidebar />} \/>

即，父组件为了在自己的组件内部获取到Users和UsersSidebar组件，所以有两种方法:一种方式就是直接在自己的组件中通过main,sidebar属性配置;还有一种方式就是这里采用的方式，即配置在子组件的components属性中。不管采用哪一种方式，都是将我们的组件传递到父组件中，所以父组件中可以通过props获取。

2.2 每一级组件中获取到的属性
 "location": {
    "pathname": "category/Tacos/Carne Asada",
    "search": "",
    "hash": "",
    "action": "PUSH",
    "key": "mi5l9e",
    "query": {},
    "basename": "http://localhost:8080/"
  },
  //表示两个参数的值
  "params": {
    "category": "Tacos",
    "item": "Carne Asada"
  },
  //表示path
  "route": {
    "path": ":item"
  },

特别注意params部分，包括了某一个实例化路径中所有的参数的值。比如路径"http://localhost:8080/category/Tacos/Pollo"就包括了category和item两部分，但是route只包含`最里层`的组件的参数。

3.异步components实例化

<Route path="courses/:courseId" getComponents={(nextState, cb) => {
  // do asynchronous stuff to find the components
  // 通过查找可以获取到我们应该实例化的所有组件
  cb(null, {sidebar: CourseSidebar, content: Course})
}} />

你可以参考这里的getComponent

参考资料:

react-router docs