tab-button

这是一个类似于组件展示并提供选择组件的框架组件 在这里可以将组件作为参数传入并展示

//组件杨大贝内部数据
        const dataTag = {
            allPin:5,
            persCov:5,
          };
          const dataHead = {
            name:'杨大贝',
            url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531738341357&di=b6ba998982f929ab1348b7a88a8133b7&imgtype=0&src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201605%2F13%2Fdcf1919ace.jpg%3Fdown'
          }
          const dataSpan = [
            '猎','内'
          ]
          const dataForm = [
                  {filed:'手机',value:'139100888888888888'},
                  {filed:'邮箱',value:'[email protected]'},
                  {filed:'出生日期',value:'1981年12月9日'},
                  {filed:'性别',},
                  {filed:'最高学历',value:'硕士'},
                  {filed:'上家公司',value:'美团在线'},
                  {filed:'最近职位',value:'产品总监'}
              ];
          const  ComponentData= {
            dataSpan:dataSpan,
            dataHead:dataHead,
            dataTag:dataTag,
            dataForm:dataForm
          }


//组件杨中贝内部数据

          const dataTag1 = {
            allPin:5,
            persCov:5,
          };
          const dataHead1 = {
            name:'杨中贝',
            url:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1387412194,3509073644&fm=27&gp=0.jpg'
          }
          const dataSpan1 = [
            '猎','内'
          ]
          const dataForm1 = [
                  {filed:'手机',value:'139100888888888888'},
                  {filed:'邮箱',value:'[email protected]'},
                  {filed:'出生日期',value:'1981年12月9日'},
                  {filed:'性别',},
                  {filed:'最高学历',value:'硕士'},
                  {filed:'上家公司',value:'美团在线'},
                  {filed:'最近职位',value:'产品总监'}
              ];
          const  ComponentData1= {
            dataSpan:dataSpan1,
            dataHead:dataHead1,
            dataTag:dataTag1,
            dataForm:dataForm1
          }

//组件杨小贝内部数据

          const dataTag2 = {
            allPin:5,
            persCov:5,
          };
          const dataHead2 = {
            name:'杨小贝',
            url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532251784586&di=da615e20d7ef3666cb027d683045a651&imgtype=0&src=http%3A%2F%2Fimg.zhaogexing.com%2Ftouxiang%2F140704%2F1-140F4144234.jpg'
          }
          const dataSpan2 = [
            '猎','内'
          ]
          const dataForm2 = [
                  {filed:'手机',value:'139100888888888888'},
                  {filed:'邮箱',value:'[email protected]'},
                  {filed:'出生日期',value:'1981年12月9日'},
                  {filed:'性别',},
                  {filed:'最高学历',value:'硕士'},
                  {filed:'上家公司',value:'美团在线'},
                  {filed:'最近职位',value:'产品总监'}
              ];
          const  ComponentData2= {
            dataSpan:dataSpan2,
            dataHead:dataHead2,
            dataTag:dataTag2,
            dataForm:dataForm2
          }


//将所有的数据整合并传入

        this.dataSource = [
            {Cardshow:(<Cardshow 
            dataSource = {ComponentData}/>),
            text:'杨大贝',
            count:0,
            constate:1,
            dataurl:'http://localhost:9001/?selectedKind=RecruitSelectButton&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel'},
            {Cardshow:(<Cardshow 
            dataSource = {ComponentData1}/>),
            text:'杨中贝',
            count:0,
            constate:0,
            dataurl:'http://localhost:9001/?selectedKind=RecruitSelectButton&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel'},
            {Cardshow:(<Cardshow 
            dataSource={ComponentData2}/>),
            text:'杨小贝',
            count:0,
            constate:0,
            dataurl:'http://localhost:9001/?selectedKind=RecruitSelectButton&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel'},
         ]
    }

    <DefaultComponent  dataSource = {this.dataSource}/>