1. app.js ~~~ import React, { Component } from 'react'; import TodoItem from '../components/TodoItem'; //react中取数据也是使用axios和vue中相同在对应的生命周期函数中取 import axios from "axios-jsonp-pro"; class App extends Component { //动态显示时数据 构造器 constructor(props) { super(props); this.state = { // msg: "hello react" value: "hello world", list: [] } } // 固定格式返回一个html1 render() { return ( <div> <input value={this.state.value} onChange={this.handleChange.bind(this)} /> <button onClick={this.handleAdd.bind(this)}>增加</button> //父组件向子组件传递一个content一个index属性和一个handleItem事件 //react中使用组件不需要注册可以直接使用（使用自调函数将自组件用大括号包裹） {this.state.list.map((item, index) => { return <TodoItem key={index} content={item} index={index} handleItem={this.handleDelete.bind(this)}></TodoItem> })} </div> ); } handleChange(e) { this.setState({ value: e.target.value }) } handleAdd() { var { list, value } = this.state; list.push(value); this.setState({ list, value:"" }) } handleClick() { var list = this.state.list; //不要直接修改statezhong if (!list.includes(this.state.value)) { list.push(this.state.value); } this.setState({ list, // value:"" }); } handleDelete(index) { //不能直接修改state中的list和小程序相同使用setdata //vue中使用 this.movies = movies; var list = this.state.list; list.splice(index, 1); react使用setState 将数据设置在 this.state中 this.setState({ list }) } componentDidMount() { alert(1) var url = "https://douban.uieee.com/v2/movie/top250"; axios.jsonp(url).then(res => { console.log(res) ; }) } }; export default App; ~~~ 2. TodoList.js ~~~ import React, { Component } from 'react'; class TodoItem extends Component { render() { return ( <div onClick={this.handleClick.bind(this)}> {this.props.content} </div> ) } //父组件将事件传递给子组件（在组件上定义一个事件用来接收传递过来的事件） handleClick() { //传递过来的事件需要传递一个参数 参数也是从父组件中传递过来的 this.props.handleItem(this.props.index) } } export default TodoItem; ~~~ 3.