~~~ //1.定义TodoItem组件 import React,{Component} from 'react'; class TodoItem extends Component { render(){ return ( <div> item </div> ) } } export default TodoItem ~~~ ~~~ //2.在父组件中引入使用 import TodoItem from './components/TodoItem'; class App extends Component { constructor(props) { super(props); this.state ={ list:[1,2,3] } } render() { return ( <div> {this.state.list.map((item,index)=>{ return <TodoItem key={index}></TodoItem> })} </div> ) } } export default App; ~~~ ~~~ //3.父组件使用属性向子组件传值 <TodoItem key={index} content={item}></TodoItem> ~~~ ~~~ //4.子组件通过this.props使用数据 import React,{Component} from 'react'; class TodoItem extends Component { render(){ return ( <div> {this.props.content} </div> ) } } export default TodoItem ~~~