react的嵌套組件

　　react沒有vue插槽的概念，但是有嵌套組件，可以用嵌套組件實現類似插槽的功能。下例中，color,name,btn相當於具名插槽，children相當於匿名插槽。

import React from 'react';
import { Button } from 'antd';

//props接受參數，props.children代表上級組件所有沒有命名的東西
function Dialog(props) {
  return (
    <div style={{ border: `1px solid ${props.color || 'red'}` }}>
      {props.children}
      {props.name}
      {props.btn}
    </div>
  )
}
//WelcomeDialog里嵌套Dialog，並傳值name，color,btn
function WelcomeDialog() {
  const btn = <button>按鈕</button>
  return (
    <Dialog name="lizhao" color="green" btn={btn}>
      <h1>welcome title</h1>
      <p>welcome content</p>
    </Dialog>
  )
}

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <WelcomeDialog />
      </div>
    )
  }
}
export default App;