React向组件内部动态传入带内容的结构--props_react layout 向组件内部注入props属性-优快云博客

本文链接：https://blog.youkuaiyun.com/S2763427717/article/details/134305040

文章讲述了在React中如何通过`children`和`render`属性实现组件间的父子通信，展示了从Parent组件通过A组件传递数据给B组件的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

children props：通过组件标签体传入结构
```
<A>
	<B>xxx</B>
</A>
{this.props.children}
```

render props：通过组件标签属性传入结构，一般用render函数属性

<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'

export default class Parent extends Component {
    render() {
        return (
            <div className='parent'>
                <h4>Parent组件</h4>
                <A render={(name) => <B name={name}></B> }></A>
            </div>
        )
    }
}

class A extends Component {
    state = {name:'sun'}
    render() {
        return (
            <div className='A'>
                <h4>A组件</h4>
                {/* {this.props.children} */}
                {this.props.render(this.state.name)}
            </div>
        )
    }
}

class B extends Component {
    render() {
        return (
            <div className='B'>
                <h4>B组件</h4>
                <div>B组件收到的name为：{this.props.name}</div>
            </div>
        )
    }
}

样式文件：

.parent{
    width: 500px;
    background-color: greenyellow;
    padding: 20px;
}

.A{
    width: 90%;
    background-color: skyblue;
    padding: 20px;
}

.B{
    width: 90%;
    background-color: slateblue;
    padding: 20px;
}