如何向组件内部动态传入带内容的结构(标签)?
- 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>
)
}
}
Comments NOTHING