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的改变。父组件向子组件传递自定事件。