原文链接: react todos 简单实现

上一篇: StyleGan 生成各种老婆 保存为视频

下一篇: react css 模块引入

可以添加信息，并且按钮处有下个信息的编号

分3个组件，标题组件，添加组件，列表组件

安装脚手架

 cnpm i create-react-app -g

设置仓库

 npm config set registry https://registry.npm.taobao.org

初始化项目

create-react-app react_demo

项目默认结构

app.js

绑定this，可以使用箭头函数或者bind方法

对于循环的列表项，需要指定一个区分的key，一般为不可修改的唯一属性

import React, {Component} from 'react';
import PropTypes from 'prop-types';let names = ['a', 'b', 'c']const ul = (<ul>{names.map((name, index) => <li key={index}>{index},{name}</li>)}</ul>
)class Header extends Component {render() {return (<h1>todos</h1>)}
}class Add extends Component {constructor(props) {super(props)//使用bind绑定thisthis.click = this.click.bind(this)}click() {const todo = this.input.valuethis.props.add(todo)}render() {return (<div><input type="text" ref={input => this.input = input}/><button onClick={this.click}>add #{this.props.count + 1}</button></div>)}
}Add.propTypes = {count: PropTypes.number.isRequired,add: PropTypes.func.isRequired
}class List extends Component {render() {const {todos} = this.propsreturn (// key 需要唯一标示和vue类似，选择尽量不需要修改的属性<div>{todos.map((name, index) => (<li key={name}><input type='checkbox'/> {index + 1},{name}</li>))}</div>)}
}class App extends Component {constructor(props) {super(props)this.state = {todos: ['a', 'b']}// this.add = this.add.bind(this)}//使用箭头函数绑定this// add(todo) {add = (todo) => {console.log(todo)const {todos} = this.statetodos.unshift(todo)console.log(todos)this.setState({todos})}render() {return (<div><Header></Header><Add count={this.state.todos.length} add={this.add}/><List todos={this.state.todos}/></div>);}
}export default App;