react中類似vue的插槽this.props.children的用法

父組件

 <TestHanderClick bg="blue">
        <p> 如果我要顯示的話，父組件是雙標簽，子組件中有this.props.children</p>
        <div>類似於匿名插槽</div>
  </TestHanderClick>

子組件

import React, { Component } from "react";
import "./base.css"


// 父組件
export class TestHanderClick extends Component {
  //  static defaultProps是默認的寫法，人家規定這樣寫的，你的默認值
  static defaultProps={
    bg:"pink",
    wi:"400px",
    he:"200px"
  }

  render() {
    return (
      // 使用值
      <div style={{  background: this.props.bg, width: this.props.wi,  height:this.props.he  }}>
        123
        {this.props.children}
         //通過這個組件，可以獲取父組件中的數據
      </div>
    )
  }
}

export default TestHanderClick;