使用react来设计带分页的文章列表，层级的设计关系以及state,props的关系

Question

首先组件我分位三个
1.父组件（做为容器，及调度状态）
2.文章列表组件
3.分页组件

父组件中的
state : page(记录当前页码) article(记录页码对应的后台数据)

文章组件:
props : article（由父组件渲染时候传入）

分页组件
state ： page（根据用户点击修改）

那么问题来了，
1.这种设计state和props是否合理？

2.找不到例子，当用户点击分页组件时候，分页组件更新state，怎么通知父组件，即当子state的page改变的时候怎么同步到父组件的page

3.父组件被动跟新state.page的时候，如何设置state.page更改然后出发获取新数据的监听器？？

实在英文不好，找不到答案，做回伸手党哈，求同学们解答

Answer 1

偷个懒:
C: Child Component, 子模块
P: Parent Component, 父模块

1. 结构方面, 这么看基本没问题, 代码写出来没有问题应该就好了.
   我认为一个 rule 比较有用:

   在 React Devtools 当中查看时从 state 和 props 可以比较明确看到模块的内容.

2. 同 @Fakefish , C 调用 P 的方法, 改变 P 的 state.

3. 不大明白你的意思, 试着说我的思路,
   如果是 P 有个 ajax 请求, 而这个请求在 C 调用, 那么我会在 P 写方法, 传到 C, C 调用.
   如果你是理解"C 触发 P 的事件, 然后 P 发起请求", 我认为这个理解是有问题的,
   React 当中不是通过事件来协调不同模块的状态或者行为的, 而是主要通过 props 跟 state.

我的方案, CoffeeScript 伪代码:

coffeeP = createClass
  getInitialState: ->
    page: 0
    article: ''

  componentDidMount: ->
    @fetchArticle @state.page

  fetchArticle: (n) ->
    ajax "/url/#{n}", (resp) =>
      @setState article: resp

  onPageChosen: (nth) ->
    @fetchArticle nth
    @setState page: nth

  render: ->
    div
      Article article: @state.article
      Pagination page: @state.page, onPageChosen: @onPageChosen

Article = createClass
  propTypes:
    article: String

  render: ->

Pagination = createClass
  propTypes:
    page: Number
    onPageChosen: Function

  onClick: (nth) ->
    @props.onPageChosen nth

  render: ->

Answer 2

其实和官网的评论组件差不多吧

问题一不敢说
问题二，子组件通过事件去触发自组件的props，父组件通过props去处理事件，这样父组件就被通知到了。
问题三，父组件通过刚才那个props触发事件之后获取数据然后再通过一个props返回给子组件，我是这么想的。

Answer 3

二楼很好的解决了 还有就是可以用reflux 利用数据做中转，各个组件都依赖数据渲染。