P14:React进阶

通过上篇文章的学习，已经把”美女”组件做了一个基本的拆分，但是还不能实现随着输入，显示出输入的内容。这里涉及的是父组件向子组件传值。然后点击删除，就相当于子组件向父组件传值。本文就主要学习一下父子组件传值的一些技巧。

父组件向子组件传值

这里只介绍最实用的，最快速的上手方法。就是使用组件属性的形式父组件给子组件传值。比如：我们在<MeinvItem>组件中加入content属性，然后给属性传递{item}，这样就完成了父组件向子组件传值。

<MeinvItem content={item} />

现在值已经顺利的传递了过去，这时候可以通过this.props.xxx的形式进行接受，比如传递过来的值，可以用如下代码进行接收。

import React, { Component } from 'react'; //imrc
class MeinvItem  extends Component { //cc

    render() { 
        return ( 
            <div>{this.props.content}</div>
         );
    }
}

export default MeinvItem;

修改完美女子项的组件后，可以打开浏览器进行预览了。

那可以用以前的老方法绑定 this.

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

这样是可以解决的，但是肯定会有小伙伴说，我看别人不是这样写的，而是在构造函数里绑定的。（有言曰：构造函数中绑定性能会高一些，特别是在高级组件开发中，会有很大的作用）

constructor绑定 this 方法。

import React, { Component } from 'react'; //imrc
class MeinvItem  extends Component { //cc
   //--------------主要代码--------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(this.props.index)
    }
}

export default MeinvItem;

子组件调用父组件方法

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

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

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

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

到此为止，就算是实现了子组件向父组件传值。

特别提醒：本文内容是 React 体系中非常重要的一节，小伙伴们可以多看几遍，并进行练习。因为真正的 React 开发工作，每天写的就是各种组件，传值是组件之间产生联系的必要一环，无法跳跃。所以一定要学好。