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 (<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>)}
}

效果：

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

umi搭建react+antd项目（六）父子组件通讯
上一篇写了一个子组件,只是把值传入进来,这篇讲解在子组件修改父组件的数据 1.在index.js里,新增方法:updateImg 用于修改list集合 updateImg() {this.setSta ...
umi搭建react+antd项目（一）环境配置
1.先创建文件夹,windows用户手动创建就行了 mkdir myReact && cd myReact 2.在myReact目下,执行脚手架命令,默认选择antd yarn cre ...
umi搭建react+antd项目（四）axios请求数据
1.下载axios yarn add axios 2.在src下新建文件夹conf,再新增js文件:axiosConf.js import axios from 'axios'axios.defaul ...
umi搭建react+antd项目（二）路由
1.我们在src下新增index2.js: import React, {Component} from 'react';export default class index2 extends Com ...
umi搭建react+antd项目（三）Mock 数据--模拟数据
1.添加mockjs yarn add mockjs 2.在mock目录下新建test.js List|10,返回list,10条数据 @image,随机生成img的url链接,mock内置函数 im ...
React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
react --- 生命周期给子组件传递数据
子组件 /src/components/LifeCycle.js import React, { Component } from 'react'export class LifeCycle exte ...
记一次webpack4+react+antd项目优化打包文件体积的过程
背景最近自己整了一个基于webpack4和react开发的博客demo项目,一路整下来磕磕碰碰但也实现了功能,就准备发到阿里云上面去看看,借用了同事的阿里云小水管服务器,配置完成之后首页加载花了十几 ...
从零开始搭建React开发项目之抖音“剪映”——创作课堂（基础入门篇）
前言 React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高,对于很多新手来说可能很多人都在犹豫是选react还是vue,如果时间充裕的话还是首选r ...

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

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

最新文章

热门文章