React向组件内部动态传入带内容的结构--props

children props：通过组件标签体传入结构

<A>
	<B>xxx</B>
</A>
{this.props.children}
1
2
3
4

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

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

1
2
3
4
5
6

案例

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>
        )
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

样式文件：

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

运行结果：