React 具名插槽

props.children 匿名插槽，如果看做一个整体{{}} 则可以在里面加入新的属性，作为具名插槽

import React from 'react'
// Dialog定义组件外观和行为
function Dialog (props) {
   //这里props .children代表了标签内部内容
   return (
      <div style={{ border: "1px solid blue" }}>
         {props.children.def}
         <div>{props.children.footer}</div>
      </div>
   );
}
//{{}}===props.children 看做一个对象
export default function Composition () {
   return (
      <div>
         <Dialog>
            {{
               def:(
                  <>
                     <h1>组件复合</h1>
                     <p>复合组件给与你足够的敏捷去定义自定义组件的外观和行为</p>
                  </>
               ),
               footer:<button onClick={() => alert(' react真好")}>确定</button>
            }}
        </Dialog>
      </div>
   )
}