React进阶-组件拆分及父子间传值

青旅半醒 2022-12-13 04:13 137阅读 0赞

#### 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\}，这样就实现了父组件向子组件传值。

然后我们在子组件中，通过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)
    }

个人博客：[Karma‘s Blog][Karma_s Blog]  
源码地址：[传送门][Link 1]

[Karma_s Blog]: http://karma520.com/2020/10/09/28%20React%E8%BF%9B%E9%98%B6-%E7%BB%84%E4%BB%B6%E6%8B%86%E5%88%86%E5%8F%8A%E7%88%B6%E5%AD%90%E9%97%B4%E4%BC%A0%E5%80%BC/
[Link 1]: https://github.com/kay-520/React_study