【无标题】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;

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

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