react 封装组件方法（弹框）

react 封装组件方法（弹框）

1、使用 vand组件库和Animate.css动画
2、建立一个父组件，App.jsx，两个按钮通过切换不同数据的方式渲染弹框内容

// An highlighted block
import React, { useState } from 'react'
import Assembly from './view/Assembly'
export default function App() {
  let [assemblyName] = useState('我是封装的组件A')
  let [assemblyName1] = useState('我是封装的组件B')
  let [ass,setAss] = useState()
  let [flat, setFlat] = useState(false)
  let changeFlat = () => setFlat(!flat)
  let [list, setList] = useState([
    { id: 1, name: '张三', wages: 1000, age: 18, gender: '男' },
    { id: 2, name: '李四', wages: 2000, age: 20, gender: '女' },
    { id: 3, name: '王五', wages: 1600, age: 21, gender: '男' },
    { id: 4, name: '赵六', wages: 1800, age: 22, gender: '女' },
    { id: 5, name: '钱七', wages: 1900, age: 23, gender: '男' },
    { id: 6, name: '孙八', wages: 2100, age: 24, gender: '女' },
  ])
  let [list1, setList1] = useState([
    { id: 1, name: '张无忌', wages: 1000, age: 18, gender: '男' },
    { id: 2, name: '张三丰', wages: 2000, age: 20, gender: '女' },
    { id: 3, name: '赵敏', wages: 1600, age: 21, gender: '男' },
    { id: 4, name: '周芷若', wages: 1800, age: 22, gender: '女' },
    { id: 5, name: '张翠山', wages: 1900, age: 23, gender: '男' },
    { id: 6, name: '殷素素', wages: 2100, age: 24, gender: '女' },
    { id: 7, name: '谢逊', wages: 1000, age: 18, gender: '男' },
  ])
  let [transferValue, setTransferValue] = useState([])
  return (
    <div>

      <button onClick={() => {
        setTransferValue([...list])
        setAss(assemblyName)
        setFlat(!flat)
      }}>组件一</button>
      <button onClick={() => {
        setTransferValue([...list1])
        setAss(assemblyName1)
        setFlat(!flat)
      }}>组件二</button>
      {flat && <Assembly
        title={ass}
        changeFlat={changeFlat}
        list={transferValue}
      >

      </Assembly>}
    </div>
  )
}

3、封装一个子组件Assembly，props接收数据渲染页面，animate.js动画，页面淡淡出现。

// An highlighted block
import React from 'react'
import {Table } from 'antd'
import 'animate.css';

export default function Assembly(props) {
    const onChange = (name, filters, sorter, extra) => {
        console.log('params', name, filters, sorter, extra);
    };
    const { Column, ColumnGroup } = Table

    return (
        <div
            style={{
                width: "100%",
                height: "100vh",
                backgroundColor: "rgba(0,0,0,0.5)",
                // 浮动到顶部
                position: "fixed",
                top: 0,
            }}>
            <div class="animate__animated animate__fadeIn" style={{
                width: "400px",
                minHeight: "400px",
                backgroundColor: "white",
                border: "1px solid black",
                position: "fixed",
                top: "calc(50% - 300px)",
                left: "calc(50% - 200px)",
            }}>
                <h2>{props.title}</h2>
                <Table dataSource={props.list} >

                    <Column title="name" dataIndex="name" key="name" />
                    <Column title="Age" dataIndex="age" key="age" />
                    <Column title="wages" dataIndex="wages" key="wages" />
                    <Column title="gender" dataIndex="gender" key="gender" />
                </Table>
                <button onClick={() => props.changeFlat()} style={{ position: "absolute", top: "10px", right: "10px" }}>关闭</button>
            </div>
        </div>
    )
}

欢迎各位，进行指教，与诸君共勉！