React插槽

React插槽：

🔰 写法方式：

 <Table>内容</Table>
 react插槽在自定义组件的内容位置

插槽使用父子传参props：

• 先设置props的默认类型

 Tab.defaultProps={
     num:0,
     content:''
 }
 Tab.prototype = {
     num:PropTypes.number,
     content:PropTypes.string
 }

• 然后将props进行解构

 const {num,content,children} = props
 console.log(children);

🔰 使用插槽完成：

封装简单组件：在内容区域使用插槽

 

<Tab num={11} content='代收费数据'>
     <i className='iconfont iconfont-xingudingxiang'>    
 </Tab>

🔰 插槽的使用：

插槽内容默认在props属性上，属性为children

 

🔰 具体将插槽分为多个：

转化数据为对象形式：

  <Tab num={11} content='代收费数据'>
        {
         {
          default: <BellOutlined />,   
          left:<button>左</button>,
          right:<button>右</button>
         }
        }
     </Tab>

组件中键名的形式使用：

 return (
     <div>
         <div>{children.default}</div>
         <div>
             <div>{num}</div>
             <div>{content}</div>
         </div>
         <div>
             <div>左：{children.left}</div>
             <div>右：{children.right}</div>
         </div>
     </div>
   )

实战：项目中模态框

父级组件代码：

let [visiable,setVisiable] = useState(false)
 let update =()=>{
     setVisiable(false)
 }
 root.render(
     <>
     {/* // 按钮点击显示 */}
     <button onClick={()=>{
         setVisiable(true)
     }}>+新增</button>
     <Dialog hidden={visiable} onUpdate={update}>
         <h3>新增用户</h3>
     </Dialog>
     </>

模态框组件：

import React, { useEffect, useState } from 'react'
 import '../assets/css/dialog.css'
 export default function Dialog(props) {
     let {children,hidden,onUpdate} = props
     // 将hidden作为默认值
     let [show,setShow] = useState(hidden)
     // 监听hidden
     useEffect(()=>{
         setShow(hidden)
     },[hidden])
     const confirms = ()=>{
         setShow(false)
         onUpdate()
     }
     const cancel = ()=>{
         setShow(false)
         onUpdate()
     }
     // hidden控制模态框显示和隐藏
     if(show){
         return (
             <div className='dialog'>
                 <div className='dialog-center'>
                     {/* 标题 */}
                     <p>{children}</p>
                     <div>内容</div>
                     <div>
                         <button onClick={confirms}>确定</button>
                         <button onClick={cancel}>取消</button>
                     </div>
                 </div>
             </div>
           )
     }
     else{
         return null
     }

 }
 ​

注意的点：

1️⃣：当模态框组件点击确认或者取消关闭模态框时，再次点击父组件中的新增用户，模态框不弹出，这时就需要父组件向子组件传递自定事件来达到状态提升。

思路：

父组件向子组件传递一个自定义属性，控制组件的显示或隐藏状态，子组件通过props接收该状态，根据react的条件编译来控制控件的渲染。子组件通过useEffect来监听父组件传来的状态值，来进行state的改变。父组件向子组件传递自定事件。