3.组件之间传值

//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