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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1import React, {Component} from 'react';

2

3export default class List extends Component {

4  constructor(props) {

5    super(props);

6  }

7  render() {

8    return (

9      <div>

10        {

11          this.props.list.map((entry, index) =>

12            <div key={`list-${index}`}>{entry.src}</div>

13          )

14        }

15      </div>

16    )

17  }

18

19}

20

21

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

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

1
2
3
1import ListComponent from '../component/list'

2

3

使用如下：传入参数

1
2
3
1<ListComponent list={this.state.list}/>

2

3

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1import React, {Component} from 'react';

2import Link from 'umi/link';

3import instance from '../conf/axiosConf';

4import ListComponent from '../component/list'

5

6export default class index extends Component {

7  constructor(props) {

8    super(props);

9    this.state = {

10      list: []

11    }

12  }

13

14  componentDidMount() {

15    instance.get("api/img").then(data => {

16      this.setState({list: data.list});

17    })

18  }

19

20  render() {

21    return (

22      <div>

23        <Link to="/index2">

24          index

25        </Link>

26        <div>

27          <ListComponent updateImg={this.updateImg.bind(this)} list={this.state.list}/>

28        </div>

29      </div>

30    )

31  }

32}

33

效果：