react组件通讯—案例：简易留言板

这个例子主要涉及的知识点就是父子组件传参

//父组件
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;