【无标题】react组件封装

子组件制作

import { useState,useRef, useEffect} from "react"const Table = (data)=> {const {value ,option} = dataconsole.log(value)const [stata,setValue]  = useState()const  useRefs = useRef(value)useEffect(()=> {useRefs.current.value  = value })const addGetvalue = () => {console.log(useRefs)}const table = ()=> {return <><input  ref={useRefs} onChange={(event)=> { useRefs.current = event.target.value option && option(event.target.value)}}/>4444444<button onClick={()=> {addGetvalue()}}> 初始化数据 </button></>}return  {table,addGetvalue}
}
export default Table

父组件制作

import logo from './logo.svg';
import './App.css';
import  tableaaa from './component/hooks/tableSwitch'
import { useRef ,useState} from 'react';
function App() {const {table,addGetvalue} = tableaaa({value:"llllll"})const newRef = useRef()const [state,setState] = useState()const text =  (changeValue)=> {const {table,addGetvalue} = tableaaa({value:"",option:changeValue})return table()}const changeValueOne = (value)=> {console.log("测试1事件",value)}const changeValueTow = (value)=> {console.log("测试2事件",value)}const changeValuethree = (value)=> {console.log("测试3事件",value)}const changeValuedao = (value)=> {console.log("测试4事件",value)}return (<div className="App">{table()}{text(changeValueOne)}{text(changeValueTow)}{text(changeValuethree)}{text(changeValuedao)}{/* <button onClick={()=> {addGetvalue()} }>kkkkkkkkkkkkkkkkkkkkkkkk</button> */}</div>);
}export default App;

好处,每个组件都是独立的,子组件子负责样式的渲染,父组件子负责数据的处理维护

问题:项目过大,组件引用混乱,改动一处,好几处不能使用,这种组件之间的事件都是独立相互之间不会影响

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/56405.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MyBatis XML映射文件

XML映射文件 XML映射文件的名称与Mapper接口名称一致&#xff0c;并且将XML映射文件和Mapper接口放置在相同包下&#xff08;同包同名&#xff09;XML映射文件的namespace属性为Mapper接口全限定名一致XML映射文件中SQL语句的id与Mapper接口中的方法名一致&#xff0c;并保持返…

某知名国企面试题

引言 金九银十&#xff0c;求职热潮再度来袭。最近&#xff0c;有位同学去一家知名国企应聘&#xff0c;回来后带回了一套面试题。这套面试题非常典型&#xff0c;其中包含了许多供应链金融方面的典型问题。这些问题很有分享的价值&#xff0c;大家也可以先自己独立思考一下&a…

Chromium cookies数据存储位置介绍c++

一、cookies数据库存储位置&#xff1a; C:\Users\Administrator\AppData\Local\Chromium\User Data\Default\Network\Cookies 二 、数据库操作类&#xff1a; net\extras\sqlite\sqlite_persistent_cookie_store.cc net\extras\sqlite\sqlite_persistent_cookie_store.h …

C#读取和写入txt文档(在unity中示例)

本篇内容简单介绍如何在c#中内容读取和写入txt文档 注意&#xff1a;先在Unity的StreamingAssets文件夹中创建一个txt文档 一、读取txt 1.1全部一起读取 private void ReadText01() {string filePath Path.Combine(Application.streamingAssetsPath, "testTXT.txt&qu…

[Java基础] 基本数据类型

[Java基础] 运算符 ​​​​​​​[Java基础] Java HashMap 的数据结构和底层原理 目录 Java基本数据类型 byte short int long float double char boolean 存在的一些坑 最佳实践 常见面试题 Java有哪些基本数据类型&#xff1f; 各基本数据类型所占的内存空间…

Spring 和 javaEE的关系

我的理解&#xff1a; 相当于其实只用javaee的规范其实已经可以直接写后端系统了。但是Spring集成扩展了javaee&#xff0c;提供了一套更方便好用的编程规范&#xff0c;可以更高效便捷的写后端系统。 具体介绍&#xff1a; Java EE&#xff08;现在称为 Jakarta EE&am…

003 Springboot操作RabbitMQ

Springboot整合RabbitMQ 文章目录 Springboot整合RabbitMQ1.pom依赖2.yml配置3.配置队列、交换机方式一&#xff1a;直接通过配置类配置bean方式二&#xff1a;消息监听通过注解配置 4.编写消息监听发送测试5.其他类型交换机配置1.FanoutExchange2.TopicExchange3.HeadersExcha…

AsyncTask的工作原理和缺陷

AsyncTask的工作原理及其缺陷 AsyncTask是Android平台提供的一个轻量级的异步任务类&#xff0c;它允许开发者在后台线程中执行耗时操作&#xff0c;并在操作完成后将结果回调到主线程以更新UI。AsyncTask内部封装了线程池和Handler机制&#xff0c;简化了多线程编程的复杂性。…

4D-fy: Text-to-4D Generation Using Hybrid Score Distillation Sampling技术路线

这篇文章分为四部分&#xff0c;首先从2021年的CLIP说起。 这篇论文的主要工作是提出了一种名为 CLIP&#xff08;Contrastive Language-Image Pre-training&#xff09; 的模型&#xff0c;它通过自然语言监督学习视觉模型&#xff0c;以实现视觉任务的零样本&#xff08;zer…

20 Shell Script输入与输出

标出输入、标准输出、错误输出 一、程序的基本三个IO流 一&#xff09;文件描述符 ​ 任何程序在Linux系统中都有3个基本的文件描述符 ​ 比如: ​ cd/proc/$$/fd ​ 进入当前shell程序对于内核在文件系统的映射目录中: [rootlocalhost ~]# cd /proc/$$/fd [rootlocalhos…

springcloud之基于RabbitMQ消息总线方式刷新配置服务

前言 在微服务架构中&#xff0c;为了更方便的向微服务实例广播消息&#xff0c;我们通常会构建一个消息中心&#xff0c;让所有的服务实例都连接上来&#xff0c;而该消息中心所发布的消息都会被微服务实例监听和消费&#xff0c;我们把这种机制叫做消息总线(SpringCloud Bus)…

Web集群服务-代理和负载均衡

1. 概述 1. 用户----->代理--->Web节点,后面只有一个节点,一般使用的是nginx代理功能即可 2. 后面如果是集群需要使用nginx负载均衡功能 2. 代理分类 代理分类方向应用正向代理用户(服务器)-->代理--->外部(某网站)服务器通过代理实现共享上网/访问公网反向代理用…

Linux:进程控制(三)——进程程序替换

目录 一、概念 二、使用 1.单进程程序替换 2.多进程程序替换 3.exec接口 4.execle 一、概念 背景 当前进程在运行的时候&#xff0c;所执行的代码来自于自己的源文件。使用fork创建子进程后&#xff0c;子进程执行的程序中代码内容和父进程是相同的&#xff0c;如果子进…

Python基础语法条件

注释 注释的作用 通过用自己熟悉的语言&#xff0c;在程序中对某些代码进行标注说明&#xff0c;这就是注释的作用&#xff0c;能够大大增强程序的可读性。 注释的分类及语法 注释分为两类&#xff1a;单行注释 和 多行注释。 单行注释 只能注释一行内容&#xff0c;语法如下…

跟着小土堆学习pytorch(一)——Dataset

文章目录 一、前言二、dataset三、代码展示 一、前言 pytorch也是鸽了很久了&#xff0c;确定了下&#xff0c;还是用小土堆的教程。 kaggle获取数据集 二、dataset dateset&#xff1a;数据集——提供一种方式去获取数据及其标签 如何获取数据及其标签以及总共多少个数据…

PostgreSQL学习笔记六:模式SCHEMA

模式&#xff08;Schema&#xff09; PostgreSQL中的模式&#xff08;Schema&#xff09;是一个命名的数据库对象集合&#xff0c;包括表、视图、索引、数据类型、函数、存储过程和操作符等。模式的主要作用是组织和命名空间数据库对象&#xff0c;使得同一个数据库中可以包含…

基于gewechat制作第一个微信聊天机器人

Gewe 个微框架 GeWe&#xff08;个微框架&#xff09;是一个创新性的软件开发框架&#xff0c;为个人微信号以及企业信息安全提供了强大的功能和保障。GeWe的设计旨在简化开发过程&#xff0c;使开发者能够高效、灵活地构建和定制通信协议&#xff0c;以满足不同应用场景的需求…

JavaScript object(2)

这样的话&#xff0c;就变成只读了。

外包干了5天,技术明显退步

我是一名本科生&#xff0c;自2019年起&#xff0c;我便在南京某软件公司担任功能测试的工作。这份工作虽然稳定&#xff0c;但日复一日的重复性工作让我逐渐陷入了舒适区&#xff0c;失去了前进的动力。两年的时光匆匆流逝&#xff0c;我却在原地踏步&#xff0c;技术没有丝毫…

“八股文”面试:助力、阻力还是空谈?

在当今的IT行业&#xff0c;面试程序员时提及“八股文”已成为一种普遍现象。所谓“八股文”&#xff0c;通常指的是一系列固定的、标准化的面试问题及其解答&#xff0c;这些问题往往涵盖了计算机科学和软件工程的基础知识&#xff0c;以及一些流行的技术框架和算法。然而&…