react组件封装的常见问题（一）

最新推荐文章于 2024-05-15 13:06:26 发布
最新推荐文章于 2024-05-15 13:06:26 发布
阅读量480 收藏 2
点赞数 3
分类专栏： React面试题 React 组件封装 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54476873/article/details/127554894
版权

项目里面经常需要我们封装组件来提高复用性和开发效率，有时我们不仅需要用到动态输入的数据，可能还需要更改这部分数据，做一些交互。

  • 现有一个需求：做一个支持多选的tab组

  • Radio tab1、tab2 切换时传入封装组件的data会变化
    两个tab，下面是MultSelect 组件

  • index.jsx 父组件

import React, { useState } from 'react'
import { Radio } from 'antd';
import MultSelect from './MultSelect';

const optionsWithDisabled = [
  {
    label: 'tab1',
    value: 'tab1',
  },
  {
    label: 'tab2',
    value: 'tab2',
  }
];

const data1 = [
  { id: '1', isActive: true, name: '我是tab1内容1', sub: '' },
  { id: '2', isActive: false, name: '我是tab1内容2', sub: '' },
  { id: '3', isActive: false, name: '我是tab1内容3', sub: '' },
];

const data2 = [
  { id: '1', isActive: true, name: '我是tab2内容1', sub: '' },
  { id: '2', isActive: false, name: '我是tab2内容2', sub: '' },
  { id: '3', isActive: false, name: '我是tab2内容3', sub: '' },
];

export default function MyComp() {
  const [selectValue, setSelectValue] = useState('tab1');
  const [data, setData] = useState(data1);

  const onChange = ({ target: { value } }) => {
    console.log('radio4 checked', value);
    setSelectValue(value);
    setData(value==='tab1'?data1:data2);
  };

  const handleDataChange=(value)=>{
    console.log(value);
  }

  return (
    <div>
      <Radio.Group
        options={optionsWithDisabled}
        onChange={onChange}
        value={selectValue}
        optionType="button"
      />
      <MultSelect data={data} handleDataChange={handleDataChange} />
    </div>
  )
}

错误的写法

  • MultSelect .jsx
  • data传进来作为dataList的默认值，实际上useState初始值只会在第一次render使用，之后更新都是在上一次setState更新后的基础上去更新，不再使用初始值了；如果传进来的data不是一个相对静态（immutable）的值，就不能作为useState的初始值使用，否则会违背它的设计模式。
import React, { useState, useEffect } from 'react';
import './MultSelect.scss';

const MultSelect = ({data,handleDataChange}) => {
  const [idList, setIdList] = useState([]);
  const [dataList, setDataList] = useState(data); //此处data只有初始值使用了一次，会导致切换Radio这个组件不更新data

  const handleClick = (e, idx) => {
    let dataTemp = dataList.map((item) => {
      return {
        ...item,
        isActive:
          item.id == idx ? (item.isActive = !item.isActive) : item.isActive,
      };
    });
    let idList = dataTemp
      .filter((item) => item.isActive)
      .map((item2) => item2.id);
    setDataList(dataTemp);
    setIdList(idList);
    handleDataChange({
      data: dataTemp,
      idList,
    });
  };

  return (
    <div className="list-container">
      {dataList.map((i) => {
        return (
          <span
            key={i.id}
            className={
              i.isActive ? 'item slected ' : 'item'
            }
            onClick={(e) => {
              handleClick(e, i.id);
            }}
          >
            {i.name}
            <sub>{i.sub}</sub>
          </span>
        );
      })}
    </div>
  );
};

export default MultSelect;

切换为tab2时MultSelect 组件内容没有变化

正确的写法1

  • MultSelect .jsx
  • data使用useEffect监听，再用setState保存，这样才可以接收动态data，能够及时变化
import React, { useState, useEffect } from 'react';
import './MultSelect.scss';

const MultSelect = ({ data, handleDataChange }) => {
  const [idList, setIdList] = useState([]);
  const [list, setList] = useState(data);

  const handleClick = (e, idx) => {
    let pollutionTemp = list.map((item) => {
      return {
        ...item,
        isActive:
          item.id == idx ? (item.isActive = !item.isActive) : item.isActive,
      };
    });
    let idList = pollutionTemp
      .filter((item) => item.isActive == true)
      .map((item2) => item2.id);
    setList(pollutionTemp);
    setIdList(idList);
  };

  useEffect(() => {
    if (list.length == 0 || idList == '') return;
    handleDataChange({
      data: list,
      idList,
    });
  }, [idList, list]);

  useEffect(() => {
  //使用useEffect监听传入的data，再用setState更新
    console.log('data',data);
    setList(data);
    let ids = [];
    data.map((item) => {
      if (item.isActive) ids.push(item.id);
    });
    setIdList(ids);
  }, [data]);

  return (
    <div className="list-container">
      {list.length > 0 &&
        list.map((i) => {
          return (
            <span
              key={i.id}
              className={
                i.isActive ? 'item slected ' : 'item'
              }
              onClick={(e) => {
                handleClick(e, i.id);
              }}
            >
              {i.name}
              <sub>{i.sub}</sub>
            </span>
          );
        })}
    </div>
  );
};

export default MultSelect;

在这里插入图片描述

错误写法的使用场景

  • 如果传进来的data是immutable，一旦创建就不再改变了，那么就可以使用上述错误的写法。比如index.jsx文件中通过接口获取data（或者是静态死数据）保存后，就传给MultSelect组件，这样是可以的；但是需要注意，在index.jsx文件中引入组件时，应该需要判断data不为空，再去渲染组件，否则data还是会经历由空到有数据的转变，依旧会出问题；静态死数据也可以直接在index.jsx中保存data的state中，直接写为initialState（或者不妨直接传入组件），这样也不会发生由数据变化导致的组件不更新的bug。
  1. 判断是否为空
  • index.jsx 父组件
import React, { useState } from 'react'
import { Radio } from 'antd';
import MultSelect from './MultSelect';

const optionsWithDisabled = [
  {
    label: 'tab1',
    value: 'tab1',
  },
  {
    label: 'tab2',
    value: 'tab2',
  }
];

export default function MyComp() {
  const [selectValue, setSelectValue] = useState('tab1');
  const [data, setData] = useState([]);

  const onChange = ({ target: { value } }) => {
    console.log('radio4 checked', value);
    setSelectValue(value);
    setData(value==='tab1'?data1:data2);
  };

  const handleDataChange=(value)=>{
    console.log(value);
  }

useEffect(() => {
    //调用接口保存data数据
    axios.get('http:111111.cn',{params:{p1:1}).then(res=>{
    setData(res);
    })
  }, []);
  
  return (
    <div>
      <Radio.Group
        options={optionsWithDisabled}
        onChange={onChange}
        value={selectValue}
        optionType="button"
      />
      {data.length>0 && <MultSelect data={data} handleDataChange={handleDataChange} />}
    </div>
  )
}
  1. 静态死数据
  • index.jsx 父组件
import React, { useState } from 'react'
import { Radio } from 'antd';
import MultSelect from './MultSelect';

const optionsWithDisabled = [
  {
    label: 'tab1',
    value: 'tab1',
  },
  {
    label: 'tab2',
    value: 'tab2',
  }
];

const data1 = [
  { id: '1', isActive: true, name: '我是tab1内容1', sub: '' },
  { id: '2', isActive: false, name: '我是tab1内容2', sub: '' },
  { id: '3', isActive: false, name: '我是tab1内容3', sub: '' },
];

export default function MyComp() {
  const [selectValue, setSelectValue] = useState('tab1');
  const [data, setData] = useState(data1);

  const onChange = ({ target: { value } }) => {
    console.log('radio4 checked', value);
    setSelectValue(value);
    setData(value==='tab1'?data1:data2);
  };

  const handleDataChange=(value)=>{
    console.log(value);
  }

  return (
    <div>
      <Radio.Group
        options={optionsWithDisabled}
        onChange={onChange}
        value={selectValue}
        optionType="button"
      />
      <MultSelect data={data} handleDataChange={handleDataChange} />
      {/* <MultSelect data={data1} handleDataChange={handleDataChange} /> */}
    </div>
  )
}
  • 这两种解法有很大的局限性，只能在特定的场合使用，在开发时还是尽量使用useEffect监听 + setState更新的方式比较好。
丿小丸子巛
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react组件封装
CSDNchaxundaima的博客
03-30 338
以一个form表单为例，我们现在要封装一个表单 这个表单代码如下： import React, { Component } from 'react' export default class formitem extends Component { constructor(props){ super(props) } render() { return ( <div> <for
react 组件封装原则_React 组件封装
weixin_35643153的博客
01-14 666
初窥通过 create-react-app 构建的 React 工程，其中的 src 目录是我们关注的重点，它是我们编写代码的地方，我们现在需要做的，就是把里面的东西全部删除，然后一步步的尝试自己构建。首先我们创建一个 index.js 。// 导入依赖import React, { Component } from 'react';import ReactDOM from 'react-dom'...
React学习笔记（五） --- 组件生命周期和组件复用
weixin_45092437的博客
01-26 1488
一、组件生命周期 1、概念 ​ 组件的生命周期是指组件从被创建到挂载到页面中，再到组件卸载的过程。在React中，只有类组件才有生命周期，函数组件是不存在生命周期的。组件生命周期大体分为三个阶段：创建阶段、更新阶段、卸载阶段。在组件生命周期的每一个阶段，React 都给我们提供了一些方法，让我们可以在对应阶段执行某些任务，这些方法就是生命周期的钩子函数。 2、创建阶段 ​ 生命周期的创建阶段常用的钩子函数有三个，执行顺序为：constructor() --> render() --> co
React 封装组件的一些心得（一）
weixin_52014110的博客
02-05 1004
分享自己使用React在写组件库的时候收获的一些心得体会。主要是参考了 antd-mobile , react-vant, tard 等组件库的。
[项目实战，源码完整]手把手教你怎么封装组件，React 重写学成在线 III_react 函数组件如何重写(1)
最新发布
2401_84141419的博客
05-15 303
midConent其实为了省事儿单独的写也不是不可以，嫌麻烦的也可以直接这么写。这种就属于每个人都会不太一样的编码风格和习惯问题，对于我来说将这些常量提取出去，一旦要修改或是清理数据都会方便很多。毕竟真实的项目中，如果后台数据没有准备好的话，大多数情况下是要自己准备，而不是等后台开发完毕之后再使用后台传来的数据进行开发。‼️ 所以，一定要和你的后台提前沟通好传来的数据结构是什么样子的，有文档最好，没有文档要留下邮件或是微信聊天记录作为证据，以防。
React组件封装（一）---Modal
weixin_52199120的博客
08-07 1244
使用UI组件库确实是一种很好的选择，它提供了丰富的UI组件和工具，可以大大简化前端开发，然而，有时我们可能需要根据项目的具体需求进行一些自定义的组件封装，而不是仅仅局限于组件库提供的组件。在React中，封装组件是一种很常见的作法，可以提高代码的可复用性和可维护性。常见的组件封装有表单组件、模态框组件、通知组件、图片轮播图组件、下拉菜单组件等。但是它的逻辑有点繁琐，需要从父组件跳到子组件再跳到父组件…今天要写的是模态框组件。封装一个可复用的模态框组件，可以在不同的场景中使用，例如展示提示信息、确认操作等。
组件化开发之如何封装组件-react
ccirclee的博客
08-26 2028
组件是构建用户界面的基本单元，它是一个独立的、可重用的、可组合的代码单元，用于表示UI的一部分。人话：当谈论组件时，就像在搭积木一样，每个组件都是一个独立的、可以重复使用的代码块，用来构建网页或应用的各个部分。比如界面的布局，像按钮、文本输入框这样的东西。
第十一章 React 封装自定义组件
Etc.End的博客
12-11 1543
自定义组件是指根据应用需求，自定义的组件。它们可以是有状态的或无状态的，可以接受props并返回JSX或null，并且可以包含生命周期方法、refs、context等等。自定义组件在React应用中非常常见，因为React的核心思想就是组件化。每一个React页面都是由一个或多个组件构成，组件是构建React应用程序的基石。它们可以封装可重用的UI组件，使代码更加模块化和可维护。自定义组件可以有很多用途。例如，它们可以创建可重用的UI组件，如按钮、表单、布局等。
react-一个简单的甘特图React组件封装
08-15
在这个场景下，我们将讨论如何封装一个简单的甘特图React组件，并探讨相关的React技术和图表绘制策略。 首先，让我们了解React组件的基本概念。React组件是可重用的代码块，它们像JavaScript函数一样接收任意输入...
React Form组件的实现封装杂谈
08-27
在 React 框架中，Form 组件是非常常见的组件之一，它提供了与用户交互的方式，例如提交订单、设置系统等。Form 组件的实现封装可以达到简化开发的目的。本文将讨论 Form 表单组件设计的思路，并结合 ZentForm 组件...
react-一个简单的React组件用于根据条件封装子项
08-14
"react-一个简单的React组件用于根据条件封装子项"这个项目提供了一个实用的组件示例，它能够根据特定的条件来动态地渲染子组件。这种功能在实际开发中非常常见，比如在实现条件显示、逻辑判断或者数据过滤时。 ...
React实现全局组件的Toast轻提示效果
10-17
React 实现全局组件的 Toast 轻提示效果是构建用户界面时常见的需求，尤其是在需要向用户提供即时反馈的情况下。本文将详细介绍如何在 React 应用中创建一个可全局调用的 Toast 组件，以及如何实现其不同类型的提示...
React封装组件（Button按钮和Modal模态框）
欢迎
12-01 2225
React封装组件（Button按钮和Modal模态框）
【REACT-组件封装1】
limuzhixing的博客
02-23 390
REACT-组件封装1
React——创建组件和封装组件
wukeyan的博客
04-19 712
第一种创建组件的方式：函数组件 import React from 'react' import ReactDOM from 'react-dom' const cat = { name:'Kitty', age:2, gender:'雌' } function Hello(props){ //组件名称首字母必须大写,注意这个props是只读的，不能被重新赋值，这点和vue一样 return ( <> <div>我是一个hello函数组件 ---{props.name}
组件的二次封装
m0_47999208的博客
12-14 624
组件，我们想要创建一个更复杂的自定义按钮组件，该组件除了具有基础按钮的所有功能外，还具有一些额外的功能，如显示模态框等。在这种情况下，我们可以使用扩展运算符将所有传递给我们的props传递给基础按钮组件。）来传递props的作用是将一个对象的所有可枚举属性（包括自身的和继承的）复制到新创建的对象中。当我们在二次封装组件时使用它，可以方便地将所有传递给我们的props传递给基础组件。的组件，它接受任意数量和类型的props。将具有与基础按钮组件完全相同的API，但还可以添加更多的功能或样式。
【随笔一】forwardRef 包裹的子组件尽量不要与 FC泛型搭配使用
二三的博客
03-07 594
的一个泛型，表示 函数式组件，是 function component 的缩写。于是换了种写法，子组件使用普通的函数式写法，此时搭配。包裹，方便获取子组件的特定方法和状态。可以让函数组件定义更加清晰和类型安全。此时，父组件上绑定 ref 不会报错。开发中，遇到了这样一个问题：使用。绑定在DOM上面不应该会报错才对。定义一个函数式组件，然后使用。首先，我们先了解下什么是。
React中封装组件的一些方法
web前端开发
07-24 4601
来源 | https://www.shymean.com/tags最近参与了一个基于Raact技术栈的项目，距离我上一次在工作中react已经过去了挺长一段时间，因此打算整理在react中...
在react中封装能够复用的组件
weixin_43709908的博客
12-26 910
在react中封装能够进行复用的组件，实现在多个页面都能够使用，减少了我们书写的代码量。 我举一个例子来进行说明 1.顶部导航栏在我们做项目时经常性遇到，将顶部的导航栏封装成一个能够复用的组件 2.我们使用的是antd-mobile组件库中的NavBar组件 下面我们来开始进行封装 import React from 'react' 导入高阶组件 import {withRouter}...
react封装组件
06-02
一个常见的做法是使用函数组件或类组件来封装，同时传入props作为组件的参数，以便组件可以接收不同的数据和行为。 以下是一个简单的示例，其中封装了一个可以显示标题和内容的组件： ```jsx import React from '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值