React入门实战（一）联系人列表Contact（附完整代码）

Contact: [

{ id: 1, name: “ccy”, age: 24, sex: “female” },

{ id: 2, name: “ccy1”, age: 23, sex: “male” },

{ id: 3, name: “ccy2”, age: 25, sex: “female” }

]

---

基本搭建

---

项目基本搭建请看我的上一篇文章：here

此处我们新建了一个Contacts.js文件，用来展示联系人数据和删除联系人，该组件为类组件，框架是这样的：

import React from ‘react’

const Contacts = () => {

}

export default Contacts;

在主组件App.js中引入并通过props把Contact数据传过来

// 引入react

import React, { Component } from ‘react’

// 引入Contact

import Contacts from ‘./Contacts’;

// 创建类组件App

class App extends Component {

state = {

Contact: [

{ id: 1, name: “ccy”, age: 24, sex: “female” },

{ id: 2, name: “ccy1”, age: 23, sex: “male” },

{ id: 3, name: “ccy2”, age: 25, sex: “female” }

]

}

render() {

// 使用Contacts

return (

)

}

}

export default App;

子组件Contact接收props

import React from ‘react’

const Contacts = (props) => {

// 解构时的命名需要与传递过来的变量名一致

const { contactList } = props;

console.log(contactList);

return (

联系人列表

)

}

export default Contacts;

效果：可以看到，App.js传递过来的三条记录已经拿到了