向组件内部动态传入带内容的结构(标签)
Vue中:
使用slot技术,也就是通过组件标签传入结构 <A><B/></A>
React中:
1. 使用 children props:通过组件标签体传入结构
<A>
<B>xxx</B>
</A>
{this.props.children}
局限:B组件拿不到A组件内的数据
2. 使用 render props:通过组件标签属性传入结构,而且可以携带数据,一般用 render函数属性
<A render={ data => <B data={data} /> } />
A组件:{this.props.render(内部state数据)}
B组件:读取A组件传入的数据,显示 {this.props.data}
import React, { Component } from 'react'
export default class Demo extends Compontent {
render () {
const {name, age} = this.state
return (
<div>
<h3>我是Demo组件</h3>
<A render={ name => <B name={name} /> } />
</div>
)
}
}
class A extends Compontent {
state = {name: 'Tom', age: 18}
render () {
const {name, age} = this.state
return (
<div>
<h3>我是A组件</h3>
{<!-- 在A组件预留一个位置可以展示其他组件内容,并传递参数 -->}
{this.props.render(name)}
</div>
)
}
}
class B extends Compontent {
render () {
return (
<div>
<h3>我是B组件</h3>
<h4>接收到A组件传递的名字是:{this.props.name}</h4>
</div>
)
}
}