react之renderProps

react之renderProps

类似于vue中的插槽

<A render = {(name) => <C name = {name}/>}/>
{this.props.render(name)}

代码片段：

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

export default class Parent extends PureComponent {
  render() {
    return <div className='parent'>
      我是一个父组件
      {/* 将子组件引入，以此形成父子关系,同时传递一个Grid组件，让Child和Grid形成父子关系，同时可以将父组件的数据传递给子组件*/}
      <Child render = {(name) =><Grid name = {name}></Grid>}/>
    </div>;
  }
}

class Grid extends PureComponent {
  render() {
    return <div className='grid'>我是孙子的组件,我接收到的父组件传递过来的用户名为：{this.props.name}</div>;
  }
}

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

export default class Child extends Component {
  state = {
    username:'小花'
  }
  render() {
    const {username} = this.state;
    return <div className='child'>
      我是子组件
      {this.props.render(username)}
    </div>;
  }
}