react父组件向子组件传值

react父组件向子组件传值

1. 父组件 TodoList.js

import React,{ Component, Fragment } from 'react'//Fragment  作为容器存在,不会渲染成dom元素
import TodoItem from './TodoItem'

export default class TodoList extends Component {
    constructor(props){
        super(props)
        this.state = {
            list:['Vue','Jquery','React']
        }
    }
        
    render(){
        return (
            <Fragment>
                <p>前端知识点</p>
                <ul>
                    {
                        this.state.list.map((item, index)=>{
                            return (
                                <li key={index}>
                                    <TodoItem
                                        index={index}
                                        content={item} ></TodoItem>
                                </li>
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }
}

2. 子组件 TodoItem.js

import React,{ Component } from 'react'

export default class TodoItem extends Component {
    handClick() {
        console.log(this.props.index)
    }
    render(){
        return (
            <div onClick={this.handClick.bind(this)}>{this.props.content}</div>
        )
    }
}