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.