一、拆分组件 首先第一步需要做的是将这个页面拆分成几个组件 首先顶部的输入框,可以完成添加项目的功能,可以拆分成一个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...
(3)UI组件颗粒度尽量小,方便重用; 3.2显示list的jsx 1varTodoListItem =React.createClass({2getInitialState:function(){3return{4statue:this.props.statue5}6},7toggleState:function(){8this.setState({statue:!this.state.statue})9},10render:function(){11if(!this.state.statue){12return(13{this.p...
import React, { Component } from 'react' import Header from './components/Header' import Footer from './components/Footer' import List from './components/List' import './App.css'; export default class App extends Component { state = { todoList: [ { id: 1, name: "吃饭", done: true...
import List from './List' import { useState } from 'react'; export default function App() { // 初始化数据 const [todos, setTodos] = useState([ { id: '01', name: '吃饭', done: true }, { id: '02', name: '睡觉', done: true }, ...
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...
使用ReactDOM.createRoot() 函数渲染组件: const root = document.getElementById('root'); ReactDOM.createRoot(root).render(<TodoList />); 继续精简: const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />); ...
React入门实战实例——ToDoList实现,最近学习了一小段时间的React,对一些React开发组件的基础有了一点认识,跟着教学视频,自己实现了一个ToDoList组件的功能,今天把做这个组件的过程记录一下,加深学习印象,给同样的前端入门者做一个参考。...
import React, { Component } from 'react' class App extends Component { constructor(props) { super(props); this.state = { list: [ { title: "任务一", checked: false }, { title: "任务二", checked: true }, { title: "任务三", checked: false }, ...