React父组件向子组件传值 ，子组件调用父组件方法

一、父组件Father.js

import React,{
     Component} from 'react'
class Father extends Component{
     
	constructor(props){
     
        super(props) //调用父类
        this.state = {
     
            list:['测试一','测试二']
        }
    }
    render(){
     
    	return(
    		<div>
    			<ul>
                    {
     
                        this.state.list.map((item,index)=>{
     
                            return(
                                
                                <ChildItem
                                    key={
     index+item} 
                                    content={
     item} //传递给子组件
                                    index={
     index}
                                    deleteItem = {
     this.deleteItem.bind(this)}
                                />
                            ) 
                        })
                    }
                </ul>
    		</div>
    	)
	}
	//删除
    deleteItem(index){
     
        console.log(index)
        let list = this.state.list;
        list.splice(index,1);//从索引开始删除一项,react不能直接操作this.state里的数据
        this.setState({
     
            list:list
        })
    }
}
export default Father 

二、子组件ChildItem .js

import React, {
      Component } from 'react';

class ChildItem extends Component {
     
    // this.props 接收父组件传 的值，子组件不允许直接干预父组件的内容
    state = {
       }
    constructor(props){
     
        super(props)
        this.handleClick = this.handleClick.bind(this);//删除按钮的this指向
    }
    render() {
      
        return ( 
            <li>
                {
     this.props.content}
                <button onClick={
     this.handleClick}>删除</button>
            </li>
         );
    }

    handleClick(){
     
        console.log(this.props.index)
        this.props.deleteItem(this.props.index);//调用父组件删除方法
    }
}
 
export default ChildItem;