React中使用Vue的slot插槽功能

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力

在vue中经常使用的slot功能在react下其实非常容易实现

场景案例：
我们假设有个Panel组件，然后暴露一个名为slot的属性用来表示插槽的名称，Panel会将 input和button这2种slot放入不同的位置，以区分
在父组件使用的时候是这样的

return (
  <Panel>
    <input slot="input"></input> 
    <button slot="button">i am button</button>
  </Panel>
);

Panel组件的实现
将所有slot名称为input的组件放入了div内
将所有slot名称为button的组件放入了section内

function Panel(props){
  return (
    <div>
      <div>
        {props.children.map((item)=>{
          return item.props.slot==='input'?item:null;
        })}
      </div>
      <section>
        {props.children.map((item)=>{
          return item.props.slot==='button'?item:null;
        })}
      </section>
    </div>
  );
}

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力