React之Render Props的使用

当涉及到多层组件嵌套时，如 A 组件里嵌套 B 组件，B 组件又嵌套 C 组件，如下：

import React, { Component } from 'react'
import styles from "./RenderContent.module.css"

export default class A extends Component {
  render() {
    return (
      <div className={styles.a}>
        <div>我是组件A</div>
        <B>
          <C /> 
        </B>
      </div>
    )
  }
}

class B extends Component {
  render() {
    return (
      <div className={ styles.b }>
        我是组件B
      </div>
    )
  }
}

class C extends Component {
  render () {
    console.log("props", this.props)

    return (
      <div className={styles.c}>我是组件C</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

此时，会发现组件 A、组件 B 都能正常渲染，但是组件 C 的内容是无法渲染出来的，这是需要将组件 B 的代码修改如下：

class B extends Component {
  render() {
    return (
      <div className={ styles.b }>
        我是组件B
        { this.props.children }
      </div>
    )
  }
}

1
2
3
4
5
6
7
8
9
10

这时，组件 C 也能正常渲染了，但是，如果通过这种组件嵌套的方式，想把组件 B 中的状态传给组件 C 又该如何做呢？代码如下：

import React, { Component } from 'react'
import styles from "./RenderContent.module.css"

export default class A extends Component {
  render() {
    return (
      <div className={styles.a}>
        <div>我是组件A</div>
        {/* renderContent字段可取任何名字，必须与组件B中的props对应 */}
        <B renderContent={ (data) => <C {...data} /> }></B>
      </div>
    )
  }
}

class B extends Component {
  state = {
    name: "张三",
    age: 34
  }
  render() {
    return (
      <div className={ styles.b }>
        我是组件B
        { this.props.renderContent(this.state) }
      </div>
    )
  }
}

class C extends Component {
  render () {
    console.log("props", this.props)

    return (
      <div className={styles.c}>我是组件C</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
39

像 renderContent 这样的参数会被称为渲染属性，渲染属性是函数，所以可以向它们传递参数，这种方法相当于 Vue 中的 Slot

编辑

上次更新: 7/1/2024, 4:56:33 PM

← React之路由懒加载 React之createBrowserRouter→