导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

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

• Vue中
  • 使用slot技术, 也就是通过组件标签体传入结构 <AA><BB/></AA>
• React中
  • 使用 children props: 通过组件标签体传入结构
  • 使用 render props: 通过组件标签属性传入结构, 一般用 render 函数属性

children props

<A>
   <B>xxxx</B>
</A>

{this.props.children}

问题: 如果B组件需要A组件内的数据, ==> 做不到

render props

<A render={(data) => <C data={data}></C>}></A>

• A组件: {this.props.render(内部state数据)}
• C组件: 读取A组件传入的数据显示 {this.props.data}

代码

import React, { Component } from 'react'
import './index.css'
import C from '../1_setState'

export default class Parent extends Component {
	render() {
		return (
			<div className="parent">
				<h3>我是Parent组件</h3>
				<A render={(name)=><C name={name}/>}/>
			</div>
		)
	}
}

class A extends Component {
	state = {name:'tom'}
	render() {
		console.log(this.props);
		const {name} = this.state
		return (
			<div className="a">
				<h3>我是A组件</h3>
				{this.props.render(name)}
			</div>
		)
	}
}

class B extends Component {
	render() {
		console.log('B--render');
		return (
			<div className="b">
				<h3>我是B组件,{this.props.name}</h3>
			</div>
		)
	}
}