版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26744901/article/details/84065443
上一篇在index.js里面写了一个组件,不是很友好,我们现在分开写组件
1.新建component文件夹用于放置组件,src/component,新建list组件
import React, {Component} from 'react';
export default class List extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{
this.props.list.map((entry, index) =>
<div key={`list-${index}`}>{entry.src}</div>
)
}
</div>
)
}
}
this.props.list是从外面父组件传进来的值
2.在index.js导入上面的子组件
import ListComponent from '../component/list'
使用如下:传入参数
<ListComponent list={this.state.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 (
<div>
<Link to="/index2">
index
</Link>
<div>
<ListComponent updateImg={this.updateImg.bind(this)} list={this.state.list}/>
</div>
</div>
)
}
}
效果: