1. 前言
slot插槽 在vue里就常用
react的插槽其实也一样还是模拟一个消息框 类似
elemetui或者iviewmessage组件的形式
2. 不用插槽之前
核心代码
function Message(props) { return ( <div className="msgBox"> <div> {props.txt} <span> x </span> </div> </div> ) } ReactDOM.render((<div> <Message txt="这是一个消息提示" /> </div>), app)
简单样式
.msgBox { background-color: #67C23A; padding: 5px 20px; color: #FFF; border-radius:5px; } .msgBox span{ float:right; color: #DCDFE6; }
简易效果
1.png
![I68I5N%%GZGK_$)_G]_SR`P.png](https://ucc.alicdn.com/pic/developer-ecology/d5224265c6d34863b6f58a2c38e528a3.png?x-oss-process=image/resize,w_1400/format,webp "I68I5N%%GZGK_$)_G]_SR`P.png")
3.slot
注意看看这个 参数
props
function Message(props) { console.log("瞅瞅这个props 到底是啥:",props) return ( <div className="msgBox"> <div> {props.children} <span> x </span></div> </div> ) } ReactDOM.render((<div> <Message> 这确实是个消息提示 </Message> </div>), app)
props
1.png
不加标签 直接就是 字符串内容 {children: "XXXXX "}
![P%EZ6D7ZQ]OWX1L]RLCJFAS.png](https://ucc.alicdn.com/pic/developer-ecology/abf50a3d39104725ae624aac83d07942.png?x-oss-process=image/resize,w_1400/format,webp "P%EZ6D7ZQ]OWX1L]RLCJFAS.png")
4. 一个标签
核心代码
function Message(props) { console.log("瞅瞅这个props 到底是啥:",props) return ( <div className="msgBox"> <div> {props.children} <span> x </span></div> </div> ) } var title = "这是个消息" ReactDOM.render((<div> <Message><p>{title}</p></Message> </div>), app)
props
1.png
单个标签是对象 {children: {…}}
![4(Z_6L)_~FK8$0{]SVKPEX0.png](https://ucc.alicdn.com/pic/developer-ecology/e92d260c697344a6b86ed9e25cedeaba.png?x-oss-process=image/resize,w_1400/format,webp "4(Z_6L)_~FK8$0{]SVKPEX0.png")
5. 多个标签
核心代码
function Message(props) { console.log("瞅瞅这个props 到底是啥:",props) return ( <div className="msgBox"> <div> <h1> {props.children[0]}</h1> {props.children[1]} <span> x </span> </div> </div> ) } var title = "温馨提示" ReactDOM.render((<div> <Message> <p>{title}</p> <p> 这是一个好消息</p> </Message> </div>), app)
界面效果 以及
props
1.png
多个是数组 {children: Array(2)}
6. children自动展开
如果不需要额外的样式,可以直接写, 因为这个数组在
react里会自动展开
function Message(props) { console.log("瞅瞅这个props 到底是啥:",props) return ( <div className="msgBox"> <div> {props.children} <span> x </span> </div> </div> ) }
7.总结
children 不加标签 直接就是 字符串内容 {children: " xxx "} 单个标签是对象 {children: {…}} 多个是数组 {children: Array(2)}
