1.新建服务菜单组件

在src目录下，新建一个组件SmailSmailGirlItem.js。

import React, { Component } from 'react';
class SmailSmailGirlItem  extends Component { 
    render() { 
        return ( 
            <div>小姐姐</div>
         );
    }
}
export default SmailSmailGirlItem;

然后我们在SmailSmailGirl.js文件中引入该子组件。

import SmailSmailGirlItem from './SmailSmailGirlItem'

并修改组件内容。

<ul>
  {
  this.state.list.map((item,index)=>{
    return (
      //----------------关键修改代码----start
      <div>
      <SmailSmailGirlItem key={index+item}/>
      </div>
      //----------------关键修改代码----end
    )
  })
}
</ul>

2.父组件向子组件传值

这里我们使用组件属性的形式父组件给子组件传值。在SmailSmailGirlItem组件中加入content属性，然后给属性传递{item}，这样就实现了父组件向子组件传值。

<SmailSmailGirlItem content={item} />

然后我们在子组件中，通过this.props.属性名的形式来接收该值。

import React, { Component } from 'react';
class SmailSmailGirlItem  extends Component { 
    render() { 
        return ( 
            <div>{this.props.content}</div>
         );
    }
}
export default SmailSmailGirlItem;

需要记住：父组件向子组件传递内容，靠属性的形式传递。

3.子组件向父组件传递数据

现在我们需要点击组件中的菜单项后，删除该菜单项。

首先先来绑定点击事件，我们在SmailSmailGirlItem组件中绑定handleClick方法。

import React, { Component } from 'react';
class SmailSmailGirlItem  extends Component { 
    render() { 
        return ( 
            <div onClick={this.handleClick}>{this.props.content}</div>
         );
    }
    handleClick(){
      console.log('你触发了点击事件！')
    }
}
export default SmailSmailGirlItem;

绑定成功之后，我们需要通过操作子组件删除父组件中的数据。但React明确说明子组件不能操作父组件中的数据，所以我们需要借助一个父组件中的方法，来修改内容，在这里我们需要在子组件中调用父组件中的deleteItem方法。

首先我们在父组件中添加index下标.

<ul>
  {
  this.state.list.map((item,index)=>{
    return (
      //----------------关键修改代码----start
      <div>
      <SmailSmailGirlItem key={index+item} index={index}/>
      </div>
      //----------------关键修改代码----end
    )
  })
}
</ul>

然后在子组件中获取到下标值。

handleClick(){
    console.log(this.props.index)
}

这时候预览一下，你会发现点击后报错，错误还是我们的老朋友,没有bind(this)。那可以用以前的老方法绑定this。

return ( 
    <div onClick={this.handleClick.bind(this)}>
        {this.props.content}
    </div>
);

可以通过以上方式解决，但是构造函数中绑定性能会高一些，特别是在高级组件开发中，会有很大的作用。

constructor绑定this方法。

import React, { Component } from 'react';
class SmailSmailGirlItem  extends Component { 
  	//--------------主要代码--------start
   constructor(props){
       super(props)
       this.handleClick=this.handleClick.bind(this)
   }
   //--------------主要代码--------end
    render() { 
        return ( 
            <div onClick={this.handleClick}>{this.props.content}</div>
         );
    }
    handleClick(){
      console.log('你触发了点击事件！')
    }
}
export default SmailSmailGirlItem;

如果子组件要调用父组件方法，其实和传递数据差不多，只要在组件调用时，把方法传递给子组件就可以了，记得这里也要进行this的绑定，如果不绑定子组件是没办法找到这个父组件的方法的。

<ul>
  {
  this.state.list.map((item,index)=>{
    return (
      //----------------关键修改代码----start
      <div>
      <SmailSmailGirlItem key={index+item} index={index} deleteItem={this.deleteItem.bind(this)}/>
      </div>
      //----------------关键修改代码----end
    )
  })
}
</ul>

传递后，在SmailSmailGirlItem组件里就可以直接使用，代码如下：

handleClick(){
    this.props.deleteItem(this.props.index)
}