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传递过来的三条记录已经拿到了
列表渲染，重点是使用map逐一解析每一条记录，并用JSX语法包装
-
一条记录用一个div包裹
-
每一条记录都需要一个唯一id标识
注：Contact.js文件中解构出props的contactList之后添加这段代码
// 如果传过来的contactList有数据时逐条解析，没有时提示没有联系人
const contactShow = contactList.length ? (
contactList.map(contact => {
return (
Name: {contact.name}
Age: {contact.age}
Sex: {contact.sex}
)
})
) : (
)
// 返回待渲染的代码
return (
联系人列表
{contactShow}
)
效果：数据已展示，3条记录
给Contacts.js组件添加一个删除功能
-
增加“ 删除 ”按钮，点击该按钮，对应记录就会被删除
-
点击按钮后，将这条记录的id传递给主组件
-
主组件根据该id删除state的记录，更新展示的内容
由于数据存在App.js里，因此最终删除操作是由App.js完成的
在App.js文件中定义删除函数：
// 根据id删除记录，更新state
deleteContact = (id)=>{
// 如果id匹配，代表是要删除的记录，就不保留
let contactForm = this.state.Contact.filter(contact=>{
return contact.id !== id
})
this.setState({
Contact:contactForm
})
}
将此函数通过props传给Contacts组件，让Contacts返回需要删除的id
render() {
return (
)
}
Contacts组件接收props传来的变量
// App.js多传递了一个变量deleteContact，也需要解构出来
const { contactList,deleteContact } = props;
当用户点击“删除”按钮时，触发点击事件，调用App.js传来的函数deleteContact，将id传递出去
<button onClick={()=>{deleteContact(contact.id)}}>删除
效果：
新建一个AddContact.js文件，用于实现新增联系人的功能
-
用户在文本框内输入联系人的信息
-
点击“提交”，更新state数据
最终数据添加的任务是由App.js完成的，添加联系人的函数写在App.js中，并通过props将函数接口传给AddContact
// 添加一条联系人记录
addContactFunc = (contact)=>{
// 给新记录添加一个随机唯一id
contact.id = Math.random();
// 更新到state中
let contactForm = […this.state.Contact, contact];
this.setState({
Contact: contactForm
})
}
render() {
return (
)
}
AddContact.js：
使用的也是类组件，先定义一下文本框，将label与input绑定 ——htmlFor属性：
import React, {Component} from ‘react’
class AddContact extends Component {
// 初始化state，用来存储联系人信息
state = {
name:“”,
age:“”,
sex:“”
}
render(){
return(
提交
)
}
}
export default AddContact;
-
当用户输入数据时，及时更新到state中 ——onChange事件；
-
提交时，传递给App.js ——onSubmit事件:
// 文本框有改变，就更新state
handleChange = (e)=>{
this.setState({
[e.target.id] : e.target.value
})
}
// 点击提交时，将数据传递给主组件，并重置文本框
handleSubmit = (e)=>{
e.preventDefault();
this.props.addContact(this.state);
this.setState({
name:“”,
age:“”,
sex:“”
})
}
效果：
App.js:
// 引入react
import React, { Component } from ‘react’
import Contacts from ‘./Contacts’;
import AddContact from ‘./AddContact’;
// 创建类组件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” }
]
}
// 添加一条联系人记录
addContactFunc = (contact)=>{
// 给新记录添加一个随机唯一id
contact.id = Math.random();
// 更新到state中
let contactForm = […this.state.Contact, contact];
this.setState({
Contact: contactForm
})
}
// 根据id删除记录
deleteContact = (id)=>{
let contactForm = this.state.Contact.filter(contact=>{
return contact.id !== id
})
this.setState({
Contact:contactForm
})
}
render() {
return (
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。我做了一个整理，并且在技术博客找到了专业的解答，大家可以参考下：
由于篇幅有限，只能分享部分面试题，完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家
感悟
g src=“https://i-blog.csdnimg.cn/blog_migrate/8913c191cebdad4edeb57f118ac1d15a.jpeg” />
前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。我做了一个整理，并且在技术博客找到了专业的解答，大家可以参考下：
由于篇幅有限，只能分享部分面试题，完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家
感悟
春招面试的后期，运气和实力都很重要，自己也是运气比较好，为了回馈粉丝朋友们（毕竟自己也玩了这么久哈哈哈），整理个人感悟和总结以上。最后祝愿大家能够收获理想offer！！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
