一、拆分组件 首先第一步需要做的是将这个页面拆分成几个组件 首先顶部的输入框,可以完成添加项目的功能,可以拆分成一个Header 组件 中间部分可以实现一个渲染列表的功能,可以拆分成一个List 组件 在这部分里面,每一个待办事项都可以拆分成一个Item 组件 最后底部显示当前完成状态的部分,可以拆分成一个Footer 组件 ...
}// 清除所以已经完成的任务clearAllDone =() =>{const{ todoList } =this.state;constnewTodos = todoList.filter((item) =>{return!item.done})this.setState({ todoList : newTodos }) }render() {const{ todoList } =this.statereturn(todoList案例<HeaderaddTodo={this.addTodo}/><ListtodoList...
保存在App状态中的数据改变了还不够,还需要List获取并遍历,构造Item组件 父传子就很简单通过props // 思考:页面重新渲染,传参也会重新传一遍吗? <Listitems={items}/> 然后就是List遍历这个数组并构造Item组件,注意这里指定key 其实这里不是很明白怎么回事 return( { items.map((item) => { /*return<Item...
使用ReactDOM.createRoot() 函数渲染组件: const root = document.getElementById('root'); ReactDOM.createRoot(root).render(<TodoList />); 继续精简: const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />); ...
React 是一个用于构建用户界面的 JavaScript 库，主要特点有：声明式渲染：设计好数据和视图的关系，数据变化 React 自动渲染，不必亲自操作DOM组件化：页面切分成多个小部件，通过组装拼成整体页面，利于代码复用本文通过写个简单的 TodoList 实例，不求甚解，熟悉下 React 的开发过程。1. 安装 Node.js Node.js 是...
第七章 ReactJS - 第5节 基于Redux的状态管理 bili_1007277656 258 0 第十一章 echarts - 第1节 echarts基础 bili_1007277656 347 0 第七章 ReactJS - 第13节 基于React类的 CNode项目开发 bili_1007277656 98 0 第14节 React 扩展训练营 bili_1007277656 401 0 第七章 ReactJS - 第11节 手写mi...
React入门实战实例——ToDoList实现,最近学习了一小段时间的React,对一些React开发组件的基础有了一点认识,跟着教学视频,自己实现了一个ToDoList组件的功能,今天把做这个组件的过程记录一下,加深学习印象,给同样的前端入门者做一个参考。...
MobX入门 TodoList one more time one more chance. 一歩重头学前端, MobX入门。 MobX用于简单、可扩展的状态管理。通常搭配 React 使用,但不只限于 React。如何你厌烦了 Redux 繁杂的模板代码和 API,那么可以尝试下 MobX。网上好像流传: Redux 是谁用谁加班😂。
第四步.勾选与取消功能 App.jsx中定义一个勾选与取消的方法chekedTodo,通过List.jsx传给item.jsx,拿到input的id与当前的值给父组件,去判断拿到的id与原本的数据中的每一个id对比是否一致,一致的话,就改变当前的done的状态并且把状态值与以前的todo合并起来,否则就原封不动,最后把更新后的值重新设置一下 第五...
TodoList整体作为一个大组件; Header:input添加 List:列表作为一个组件; Item: 列表中的每个列表项(ListItem)作为一个组件 Footer:底部展示和功能作为一个组件 代码编写 App.js 父组件 import React, { Component } from 'react' import Header from './components/Header' import Footer from './components/Foot...