React中renderProps的使用

小灰灰学编程

已于 2022-03-19 12:02:31 修改

阅读量810

点赞数

分类专栏： React.js 文章标签： react.js 前端

于 2022-03-19 12:00:28 首次发布

本文链接：https://blog.csdn.net/chen_ac/article/details/123591997

版权

React.js 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

本文通过一个实例展示了在React中如何使用renderProps和childrenProps进行组件间的通信和内容渲染。A组件通过B组件的renderProps属性传递了一个函数，该函数返回了C组件并附带了参数。同时，B组件的内容通过this.props.children展示，实现了组件的动态内容插入。

摘要由CSDN通过智能技术生成

以下是对renderProps和childrenProps的使用

index.jsx

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

export default class A extends Component {
    render(){
        return (
            <div className='a'>
                <h2>我是A组件</h2>
                {/* render调用函数，返回值是C组件，传参是name */}
                <B render={(name)=><C name={name}/>}>你好</B>
            </div>
        )
    }
}

class B extends Component {

    state = {name: 'james'}
    render(){
        const {name} = this.state
        return (
            <div className='b'>
                {/* B组件标签中的内容需要通过this.props.children才能显示 */}
                <h2>{this.props.children},我是B组件</h2>
                {/* 这里相当于定义一个占位插槽 */}
                {this.props.render(name)}
            </div>
        )
    }
}

class C extends Component {
    render(){
        return (
            <div className='c'>
                <h2>我是C组件</h2>
                <h2>我从B组件接收到的名字是：{this.props.name}</h2>
            </div>
        )
    }
}

index.css

.a {
    width: 500px;
    background-color: rgb(0, 255, 213);
    padding: 10px;
}

.b {
    width: calc(100% - 20px);
    background-color: rgb(0, 162, 255);
    padding: 10px;
}

.c {
    width: calc(100% - 20px);
    background-color: rgb(212, 212, 212);
    padding: 10px;
}