renderPros——react的插槽(向组件内部动态传入带内容的结构标签)

向组件内部动态传入带内容的结构(标签)

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>
		)
	}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凡小多

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值