扩展之 renderProps

上节课我们介绍了关于PureComponent的使用，这节课我们来介绍一下renderProps

在开始这节课的内容之前，我们先对上节课的内容来做一个简单的回顾：

PureComponent自动改写了shouldComponentUpdate钩子
PureComponent底层用的是浅对比

以上便是上节课的内容，接下来我们来开始这节课的学习

`renderProps`

我们先来看一段代码：

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

export default class Parent extends Component {
  render() {
    return (
      <div className="parent">
        <h3>Parent Component</h3>
        <A>
          <B />
        </A>
      </div>
    )
  }
}
class A extends Component {
  render() {
    return (
      <div className="a">
        <h3>A Component</h3>
        {this.props.children}
      </div>
    );
  }
}
class B extends Component {
  render() {
    return (
      <div className="b">
        <h3>B Component</h3>
      </div>
    );
  }
}

这是什么意思？我们是不是三个组件？我们是不是在Parent组件中渲染了A组件？然后A组件标签有了标签体内容，内容是B组件，那么这是不是就意味着A组件的props就会接收到一个children属性，而这个children属性里面是什么？是不是被B组件？那么我们在A组件中来调用这个属性是不是就代表着在A组件中来渲染B组件？那么好，我们这个时候如果想把A组件的一个state传给B组件做props的话怎么传？

是不是没有办法传啊？通常来说我们不会用这种方法来写，我们这么写是什么意思呢，我们是不是有一个A组件还有一个B组件，但是目前我们在定义组件的时候不确定这两个组件谁是父组件，但是后期在开发的时候发现我们需要让A是父组件那么我们就这么写了，但是这么写的话我们没法把父组件的state以props方式传给子组件，所以说我们会用另一个写法：

export default class Parent extends Component {
  render() {
    return (
      <div className="parent">
        <h3>Parent Component</h3>
        <A render={() => <B />} />
      </div>
    )
  }
}

class A extends Component {
  render() {
    return (
      <div className="a">
        <h3>A Component</h3>
        {this.props.render()}
      </div>
    );
  }
}
class B extends Component {...}

那么这么写是什么意思呢？我们是不是给A组件传了一个props？这个props是一个函数，返回B组件，那么我们是不是在A组件中来调用this.props.render函数就行了？但是这样的话我们怎么把父组件的state传给子组件呢？既然render是个函数，那么他就能接参数，我们在A组件中把state传给render函数不就行了嘛：

export default class Parent extends Component {
  render() {
    return (
      <div className="parent">
        <h3>Parent Component</h3>
        <A render={state => <B {...state}/>} />
      </div>
    )
  }
}
class A extends Component {
  state = { name: "jingxun"};
  render() {
    return (
      <div className="a">
        <h3>A Component</h3>
        {this.props.render(this.state)}
      </div>
    );
  }
}
class B extends Component {
  render() {
    return (
      <div className="b">
        <h3>B Component,{this.props.name}</h3>
      </div>
    );
  }
}

那么我们现在再来看一下效果，是不是就可以成功拿到props呢？

我们看，A的state中的值成功传给了B组件。以上便是renderProps的相关应用。

总结

children props通过标签体传入结构
render props通过组件标签属性传入结构，通常用render函数属性

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/extend_render_props/