import React, { Component } from 'react'
export default class Demo extends Component {
render() {
return (
<div>
{/* render接受到A组件传来的参数 return B组件时候 当做标签属性传给B组件 */}
<A render={(msg) => <B msg={msg} />}>
</A>
</div>
)
}
}
// 定义组件A
class A extends Component {
state = {
msg: '诶嘿'
}
render() {
let { msg } = this.state
return (
<div>
我是A组件
{// 将数据当做参数传给render
this.props.render(msg)
}
</div>
)
}
}
// 定义组件B
class B extends Component {
render() {
console.log(this.props); //输出 : {msg: "诶嘿"}
return (
<div>
我是B组件
</div>
)
}
}
特别声明:文章有少部分为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!
作者: 小枫枫,
转载或复制请以
超链接形式 并注明出处 小枫枫不疯喔。
原文地址:
《react中组件如何使用“插槽”》 发布于2021-6-2
评论