React 学习笔记 —— render props

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

Vue中: 
	使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
React中:
	使用children props: 通过组件标签体传入结构
	使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

children props

<A>
  <B>xxxx</B>
</A>
{this.props.children}

• 往组件里传递内容，可以使用 children props，如下

import React, { Component } from 'react'

export default class A extends Component {
    render() {
        return (
            <div>
                <B>
                    <C/>	{/* 组件B 里面直接写了组件C*/}  {/* 这种写法，B 跟 C的父子关系明显 */}
                </B>
            </div>
        )
    }
}

class B extends Component {
    render() {
        return (
            <div>
                <h2>我是B</h2>
                {this.props.children}	{/* 组件B，需要通过 children props 来获取内容，即 C */}
            </div>
        )
    }
}

class C extends Component {
    render() {
        return (
            <div>我是C</div>
        )
    }
}

效果：

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

• 比如：组件B中，有state，并且想传递给子组件C
• 通常情况下，可以直接在 C的标签中，通过 props直接传递
• 但由于现在的写法，C 的标签范围，没有B的state，因此不能使用 props传递

render props

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

• 如果想拥有明显的父子关系，且还需要方便传递参数给子组件，那么可以使用 render props ， 如下

import React, { Component } from 'react'

export default class A extends Component {
    render() {
        return (
            <div>
                <B render={msg=><C msg={msg}/>}/>	{/* 父子关系依然明显，并且可以给子组件传递参数 */}
            </div>
        )
    }
}

class B extends Component {
    state = {msg: '来自B组件的数据'}
    render() {
        return (
            <div>
                <h2>我是B</h2>
                {this.props.render(this.state.msg)}	{/* 调用render并传递参数，然后会返回子组件 */}
            </div>
        )
    }
}

class C extends Component {
    render() {
        return (
            <div>我是C, {this.props.msg}</div>	{/* 使用 props参数 */}
        )
    }
}

效果：

render props 模拟 vue slot

import React, { Component } from 'react'

export default class A extends Component {
    
    render() {
        let X = ~~(Math.random() * 10 % 2) ? C : D	// 此处随机显示 C 或者 D 组件
        return (
            <div>
                <B render={()=><X/>}/>	// 返回 X 组件， X 可能是 C 或者 D
            </div>
        )
    }
}

class B extends Component {
    render() {
        return (
            <div>
                <h2>我是B</h2>
                {this.props.render()}	// 此处相当于 <slot></slot>，具体显示什么组件，决定于render函数的返回值
            </div>
        )
    }
}

class C extends Component {
    render() {
        return (
            <div>我是C</div>
        )
    }
}

class D extends Component {
    render() {
        return (
            <div>我是D</div>
        )
    }
}