antd (dva框架)入门教程- props数据维护

这篇文章叫antd其实已经不合适了,因为antd只是一个UI框架。 所以叫做dva比较合适,但为了和之前的组成连续的文章,所以就叫做antd教程了。

既然题目叫做-入门教程,所以定位就是给入门的新手看的(比如我这类的,对前端真是一点都不懂..)。 因此不会说特别多的原理类东西, 当然我也讲不出什么原理, 自己还一知半解呢. 因此只会说一些实践性的代码,原理嘛. 等我搞懂了再说吧.

首先来定义一下术语, props特指Component里面的props数据(因为我也是新手,所以难免可能搞不准术语,这里特指说明一下).

假设,在组件中需要获取props的name数据,而name又是从服务器获取而来的。 那么我们应该这样做。

  • 首先在models中定义的类(假设是student)中调用服务器API,获取数据(在student的effects中使用 yield call()调用)

  • 然后通过yield put()将数据返回给reducers. 在这里合并数据,也就是返回

return [...state, name]  
  • 当然在起始的地方,记着声明state
state: {  
    name: '',
  },
  • 现在数据流到了组件的mapStateToProps方法中,在这里将State中的数据合并到Props中
state.player[0] 这里的player是model中定义的namespace。  
因为只有一个name,所以是第一个元素。 如果拿不准,输出一下state.player看看是怎么保存数据的

最后返回数据

return {  
    loading: state.loading.models.player,
    name,
  }
  • 组件中使用props数据
记着添加构造函数
constructor (props) {  
    super(props)
  }

然后就可以使用 this.props.name了。