在vue中存在插槽，在react中使用renderProps进行操作

使用方式

  1. 1.在父组件标签使用时，在标签内定义一个属性render
  2. 2.render接受一个函数做为参数，返回一个子组件，可以将需要传递到子组件的数据当作参数传递 到子组件上
  3. 3.在子组件中需要使用this.props.renders()调用

RenderProps.jsx

  1. import React, { Component } from 'react'
  2. import "./index.css"
  3. export default class Parent extends Component {
  4.     render() {
  5.         return (
  6.             <div className="parent">
  7.                 <h1>我是一个parent组件</h1>
  8.                <A render={name=><B name={name}/>}/>
  9.             </div>
  10.         )
  11.     }
  12. }
  15.  class A extends Component {
  16.     state={
  17.          name:"wangsu"
  18.      }
  19.     render() {
  20.         const {name}=this.state
  21.         return (
  22.             <div className="A">
  23.                 <h1>我是一个A组件</h1>
  24.                 {this.props.render(name)}
  25.             </div>
  26.         )
  27.     }
  28. }
  31.  class B extends Component {
  33.     render() {
  35.         return (
  36.             <div className="B">
  37.                 <h1>我是一个B组件</h1>
  38.                   {this.props.name}
  39.             </div>
  40.         )
  41.     }
  42. }

index.css

  1. .parent{
  2.     width: 400px;
  3.     height: 400px;
  4.     background-color: aqua;
  5.     display: flex;
  6.     justify-content: flex-end;
  7.     align-items: flex-end;
  8. }
  9. .A{
  10.     width: 300px;
  11.     height: 300px;
  12.     background-color: yellow;
  13.     display: flex;
  14.     justify-content: flex-end;
  15.     align-items: flex-end;
  16. }
  17. .B{
  18.     width: 200px;
  19.     height: 200px;
  20.     background-color: green;
  21. }