umi搭建react+antd项目（五）子组件编写

上一篇在index.js里面写了一个组件，不是很友好，我们现在分开写组件

1.新建component文件夹用于放置组件，src/component，新建list组件

import React, {Component} from 'react';

export default class List extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      

        {
          this.props.list.map((entry, index) =>
            
{entry.src}
          )
        }
      
    )
  }

}

this.props.list是从外面父组件传进来的值

2.在index.js导入上面的子组件

import ListComponent from '../component/list'

使用如下：传入参数

完整代码：

import React, {Component} from 'react';
import Link from 'umi/link';
import instance from '../conf/axiosConf';
import ListComponent from '../component/list'

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
  }

  componentDidMount() {
    instance.get("api/img").then(data => {
      this.setState({list: data.list});
    })
  }

  render() {
    return (
      

        
          index
        
        

          
        
      
    )
  }
}

效果：