react实现vue具名插槽，超简单

简单版

准备3个组件

import React, { Component } from "react";

import "./index.css";
export default class index extends Component {
  render() {
    return (
      <div className="A">
        <h2>我是A组件</h2>
      </div>
    );
  }
}

class B extends Component {
  render() {
    return (
      <div className="B">
        <h3>我是B组件</h3>
      </div>
    );
  }
}
class C extends Component {
  render() {
    return (
      <div className="C">
        <h3>我是C组件</h3>
      </div>
    );
  }
}

使用props实现具名插槽

import React, { Component } from "react";

import "./index.css";
export default class index extends Component {
  render() {
    return (
      <div className="A" heard={() => <C />} body={()=><C/>}>
      {this.props.heard()}
        <h2>我是A组件</h2>
        {this.props.body()}
      </div>
    );
  }
}

class B extends Component {
  render() {
    return (
      <div className="B">
        <h3>我是B组件</h3>
      </div>
    );
  }
}
class C extends Component {
  render() {
    return (
      <div className="C">
        <h3>我是C组件</h3>
      </div>
    );
  }
}

其实不用箭头函数，直接传递B，C组件效果也是差不多的
但是接下来还有其他功能演示，所以就用了箭头函数

实现具名插槽父组件向子组件传值

创建3个组件

import React, { Component } from "react";

import "./index.css";
export default class index extends Component {
  render() {
    return (
      <div className="A">
        <h2>我是A组件</h2>
        <B render={(name) => <C name={name} />}></B>
      </div>
    );
  }
}

class B extends Component {
  state = {
    name: "tom",
  };
  render() {
    return (
      <div className="B">
        <h3>我是B组件</h3>
        {this.props.render(this.state.name)}
      </div>
    );
  }
}
class C extends Component {
  render() {
    return (
      <div className="C">
        <h3>我是C组件</h3>
        <h4>从b接受的的Name：{this.props.name}</h4>
      </div>
    );
  }
}

通过props传递函数的调用，这样就实现了具名插槽组件的传值的