React 学习笔记 —— render props

最新推荐文章于 2024-03-04 07:22:21 发布

tanleiDD

最新推荐文章于 2024-03-04 07:22:21 发布

阅读量537

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/TL18382950497/article/details/115545871

版权

React 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

children props

往组件里传递内容，可以使用 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中，有state，并且想传递给子组件C
通常情况下，可以直接在 C的标签中，通过 props直接传递
但由于现在的写法，C 的标签范围，没有B的state，因此不能使用 props传递

render props

如果想拥有明显的父子关系，且还需要方便传递参数给子组件，那么可以使用 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>，具体显示什么组件，决定于函数的返回值
            </div>
        )
    }
}

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

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