P13: * Component组件拆分、子组件向父组件传递数据

╰半夏微凉° 2023-10-06 20:47 7阅读 0赞

#### React16 基础 ####

*  阐述
 *  新建服务菜单组件
 *  父组件向子组件传值
 *  子组件向父组件传递数据
 *   *  warning警告
     *  获取数组索引下标
     *  子组件调用父组件方法
 *  预览最终效果
 *   *  index.js
     *  Xiaojiejie.js（未用）
     *  BeautyItem.js
     *  Beauty.js

## 阐述 ##

现在的服务菜单已经完美的制作好了，但是这从头到尾我们只用了一个组件，但是在实际工作中肯定是团队开发，我们会把一个大功能分成不同的组件。

比如把文本框和按钮单独一个组件，把下面的服务列表单独一个组件，这涉及了一个组件拆分的能力和知识。

本文就把服务菜单进行一个拆分。

## 新建服务菜单组件 ##

在 `src` 目录下，新建一个文件，这里就叫做 `BeautyItem.js`，然后先把最基础的结构写好（这里最好练习一下上节课学习的快捷键）。

import React, {
         Component } from 'react'; //imrc
    class BeautyItem  extends Component {
         //cc
    
        render() {
         
            return ( 
                <li>美女</li>
             );
        }
    }
    export default BeautyItem;

写好这些代码后，就可以到以前写的 `Xiaojiejie.js` 文件中用 `import` 进行引入，  
代码如下:

import BeautyItem from "./BeautyItem";

`###　修改 Beauty 组件`

已经引入了新写的组件，这时候原来的代码要如何修改才能把新组件加入？

把原来的代码注释掉，当然你也可以删除掉，我这里就注释掉了，注释方法如下:

{/*
    <li 
        key={index+item}
        onClick={this.deleteItem.bind(this,index)}
        dangerouslySetInnerHTML={
         {__html:item}}
    >
    
    </li>
    */ }

然后在最外层加入包裹元素 `<div>`，为的是防止两个以上的标签，产生错误信息。

最后直接写入 `Beauty` 标签就可以了。

已经把 `”美女”` 组件做了一个基本的拆分，但是还不能实现随着输入，显示出输入的内容。

这里涉及的是父组件向子组件传值。

然后点击删除，就相当于子组件向父组件传值。

## 父组件向子组件传值 ##

这里只介绍最实用的，最快速的上手方法。

**就是使用组件属性的形式父组件给子组件传值。**

比如：  
我们在 `<BeautyItem>`组件中加入 `content` 属性，然后给属性传递 `{item}`，这样就完成了父组件向子组件传值。

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

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

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

![在这里插入图片描述][65c28cb9aa094c2e83af3d9411a6704e.png]  
试着添加几个新的选项试一下，比如美女踩背。

玩笑归玩笑，学到这里你要记住一点：  
 **父组件向子组件传递内容，靠属性的形式传递。**

## 子组件向父组件传递数据 ##

现在要作这样一个功能：

点击组件中的菜单项后，删除该菜单项。  
在前边的教程中已经学习了这个知识，只是现在组件拆分了，就涉及了一个子组件向父组件传递数据的知识需要掌握。

先来绑定点击事件，这时候当然是要在 `BeautyItem` 组件中绑定了。

代码如下：

import React, { Component } from 'react'; //imrc
    class BeautyItem  extends Component { //cc
    
        render() { 
            return ( 
                <div onClick={this.handleClick}>{this.props.content}</div>
             );
        }
    
        handleClick(){
            console.log('撩拨了小姐姐')
        }
    
    }
    
    export default BeautyItem;

### warning警告 ###

这时候进行预览，打开F12，再点击服务菜单项，就会再console里显示出 `”撩拨了小姐姐”`的字样。但是console里还有一个warning警告，这个警告我们见过，**就是要求循环时必须设置`key`值。**

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]  
修改 `Beauty` 组件的 `render` 代码如下：

<ul>
        {
            this.state.list.map((item,index)=>{
                return (
                    <BeautyItem 
                    key={index+item}  
                    content={item} />
                )
            })
        }
    </ul>

绑定成功后，现在就要通过操作子组件删除父组件里的数据了。

但是React有明确规定，子组件时不能操作父组件里的数据的，所以需要借助一个父组件的方法，来修改父组件的内容。

其实在以前已经写了一个删除方法 `deleteItem`，现在要作的就是子组件调用这个方法。

//删除单项服务
    deleteItem(index){
        let list = this.state.list
        list.splice(index,1)
        this.setState({
            list:list
        })
    }

### 获取数组索引下标 ###

那现在问题来了，要删除就要知道索引值，还是需要通过父组件传递给子组件。  
这里还是通过 `props` 属性的形式进行传递。

<ul>
        {
            this.state.list.map((item,index)=>{
                return (
                    <BeautyItem
                    key={index+item}  
                    content={item}
                    index={index} />
                )
            })
        }
    </ul>

然后修改 `BeautyItem` 组件，在 `handleClick`方法里，写入下面代码：

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

这时候预览一下，你会发现点击列表执行删除方法后报错，错误还是我们的老朋友没有 `bind(this)`。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
那可以用以前的老方法绑定 `this`。

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

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

`constructor` 绑定 `this` 方法。

import React, { Component } from 'react'; //imrc
    class BeautyItem 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 BeautyItem;

### 子组件调用父组件方法 ###

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

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

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

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

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

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

## 预览最终效果 ##

![在这里插入图片描述][2ad0052b93a8424e8e7a61cb4631fdb4.gif_pic_center]

### index.js ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

### Xiaojiejie.js（未用） ###

这个没用上  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]

### BeautyItem.js ###

子组件

import React, { Component } from 'react'; //imrc
    class BeautyItem extends Component { //cc
       //--------------主要代码--------start
       constructor(props){
           super(props)
           this.handleClick=this.handleClick.bind(this)
       }
       //--------------主要代码--------end
        render() { 
            return ( 
                <div onClick={this.handleClick} dangerouslySetInnerHTML={
         {__html:this.props.content}}>
                </div>
            );
        }
        handleClick(){
            console.log(this.props.index)
            this.props.deleteItem(this.props.index)
        }
    }
    
    export default BeautyItem;

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]

### Beauty.js ###

父组件

import React,{Component,Fragment } from 'react'
    import BeautyItem from './BeautyItem'
    
    class Beauty extends Component{
    //js的构造函数，由于其他任何函数执行
    constructor(props){
        super(props) //调用父类的构造函数，固定写法
        this.state={
            inputValue:'' , // input中的值
            list:['基础按摩','精油推背']    //服务列表
        }
    }
    
    render(){
        return  (
            <Fragment>
                {/* 正确注释的写法 */}
                <div>
                    <label htmlFor="willem">加入服务：</label>
                    <input id="willem" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                    <button onClick={this.addList.bind(this)}> 增加服务 </button>
                </div>
                <ul>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                <BeautyItem 
                                key={index+item}
                                content={item}
                                index={index}
                                //关键代码-------------------start
                                deleteItem={this.deleteItem.bind(this)}
                                //关键代码-------------------end
                                />
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    
        inputChange(e){
            // console.log(e.target.value);
            // this.state.inputValue=e.target.value;
            this.setState({
                inputValue:e.target.value
            })
        }
        //增加服务的按钮响应方法
        addList(){
            this.setState({
                list:[...this.state.list,this.state.inputValue],
                inputValue:''
            })
    
        }
       //删除单项服务
       deleteItem(index){
        let list = this.state.list
        list.splice(index,1)
        this.setState({
            list:list
        })
    }
    
    }
    export default Beauty

[65c28cb9aa094c2e83af3d9411a6704e.png]: https://img-blog.csdnimg.cn/65c28cb9aa094c2e83af3d9411a6704e.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a81cf7cddc794ffc8322b6c75ea7bd07.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/3c0713587f9742ff9d44499ae4d3e250.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[2ad0052b93a8424e8e7a61cb4631fdb4.gif_pic_center]: https://img-blog.csdnimg.cn/2ad0052b93a8424e8e7a61cb4631fdb4.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/62789bde1c5645fdb051f2caa6f03e16.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/c51127c60617420ca89be4357be3ad04.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/9e4ff8d749fa4011a9f3483d7a327b4e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16