React组件数据处理

本文旨在了解React组件的数据处理，如果需要了解详细信息，可以在React官方文档查阅

React项目是由一个个组件构成的，各组件怎么做才能实现数据交换呢？本篇文章主要介绍如何在React组件中进行数据的传输响应。

数据初始化

constructor()方法中可以实现数据初始化，也可以这样初始化数据。

export default class Blog extends React.Component {
     state = {
         classifyId: null,
         menuList: []
     }
     ...
 }
 

初始化数据的使用

render() {
     return (<div>
         {/* 侧边导航 */}
         <Affix>
             <ArticleClassification classifyId={this.state.classifyId} menu={this.state.menuList} />
         </Affix>
         {/* 内容区域 */}
         <ArticleList classifyId={this.state.classifyId} />
     </div>)
 }
 

如果没有初始化state中的数据，render()函数中使用state中即将出现的参数时会报空异常。

组件内数据传递

数据初始化

export default class ArticleList extends React.Component {
     state = {
         data: null,
         pageSize: 10,
         page: 1,
     }
     ...
 }
 

取得新数据后，更新数据

   getBlogData(page, classifyId) {
         const _this = this;
         this.setState({
             page: page
         })
         axios.get('/blog-list')
              .then(res => {
                 _this.setState({
                     data: res.data.data,
                 })
             ...
         })
     }
 

数据的使用

    render() {
         const _this = this;
         if (this.state.data) {
             return (<div>
                 {/* article list */}
                 <List
                     dataSource={this.state.data.blog}
                     renderItem={item => (
                         <List.Item >
                             <a href={item.link} style={{ width: '100%' }}>
                                 <Card title={item.title} hoverable={true} >{item.content}</Card>
                             </a>
                         </List.Item>
                     )}
                 />
             </div>)
         } else {
             return null;
         }
     }
 

组件间的数据传递

子组件传递数据给父组件

子组件取得新数据后,调用属性列表中的方法，并传递参数

getBlogData(page, classifyId) {
     const _this = this;
     if (res.data.data.menu) {
         _this.props.onDataChange(res.data.data.menu)
     }
 }
 

父组件监听调用子组件暴露的方法，并传递一个函数实现监听操作

<ArticleList onDataChange={(e) => this.onDataChange(e)} />
 

父组件实现方法，取得数据并使用

// 列表数据更新监听，这里用于更新侧边栏分类数据
 onDataChange = e => {
     this.setState({
         menuList: e,
     })
 }
 

父组件传递数据给子组件

父组件取得数据后可以将数据作为参数设置给子组件暴露的数据接收参数

<ArticleList classifyId={this.state.classifyId} />
 

子组件中取数据

this.props.classifyId
 

父组件调用子组件方法处理数据

子组件中的生命周期函数（第一次创建组件后调用的方法componentDidMount），将组件实例暴露给props属性，父组件可以通过props拿到子组件实例

componentDidMount() {
     // 将本身的实例暴露出去，供父组件使用
     this.props.onRef(this)
 }
 

父组件通过回调函数取得子组件实例

<ArticleList onRef={this.onRef} />
 

回调函数实现

  onRef = e =>{
         this.articleList = e
     }
 

在父组件中调用子组件的方法

this.articleList.getBlogData(1,e.key)
 

本文由@xuxo提供首发，版权归作者所有