这个例子主要涉及的知识点就是父子组件传参
//父组件
import './App.scss'
import Add from './components/add'
import Table from './components/table'
import Page from './components/page'
import { useState } from 'react'
function App() {
const [list,setList]=useState([])
const [page,setPage]=useState(1)
const count=5;
return (
<div className="App">
<Add setList={setList} list={list}></Add>
<hr />
<Table list={list} page={page} count={count} setList={setList}></Table>
<hr/>
<Page list={list} page={page} setPage={setPage} count={count}></Page>
</div>
)
}
export default App;
//Add 子组件
import {useState} from 'react'
const Add=({setList,list})=>{
const [msg,setMsg]=useState('');
const change=(ev)=>{
setMsg(ev.target.value);
}
const add=()=>{
let _list=[...list];
_list.push(msg);
setList(_list);
setMsg('');
}
return <div>
<input type="text" onChange={change} value={msg}/>
<button onClick={add}>添加</button>
</div>
}
export default Add;
const Table=({list,page,count,setList})=>{
const del=(index)=>{
let _list=[...list];
_list.splice(index,1);
setList(_list);
}
return <ul>
{list.map((v,i)=><li key={i}><span>{v}</span><a onClick={()=>{del(i)}}>删除</a> </li>).slice((page-1)*count,page*count)}
</ul>
}
export default Table;
const Page=({page,count,list,setPage})=>{
let n=Math.ceil(list.length/count)
let pageList=[];
for(let i=1;i<=n;i++){
pageList.push(<li key={i}><a onClick={()=>{setPage(i)}} className={page==i?'active':''}>{i}</a></li>)
}
return <ol>
{pageList}
</ol>
}
export default Page;