alibaba-fusion / next

🦍 A configurable component library for web built on React.
https://fusion.design
MIT License
4.58k stars 584 forks source link

[Tab]Suggest to support using HOC as Tab's children #696

Closed guanpu closed 5 years ago

guanpu commented 5 years ago

Component

Tab

Feature Description

Support usage like this:

import React from 'react@16';
import ReactDOM from 'react-dom@16';
import { Tab, Balloon } from '@alife/next@1.x';

const { Tooltip } = Balloon;
const trigger = <Tooltip trigger="aaaaaa">哈哈哈</Tooltip>

const TabItem = props => {
  console.log(props)

  return props.permission === "1" 
    ? <Tab.Item {...props} title={<Tooltip trigger={props.title}>哈哈哈</Tooltip>}></Tab.Item> 
    : <Tab.Item {...props}></Tab.Item>

}

ReactDOM.render(
    <Tab>
        <TabItem title="Home" key="1" permission="1">Home content</TabItem>
        <TabItem title="Documentation" key="2">Doc content</TabItem>
        <TabItem title="Help" key="3">Help Content</TabItem>
    </Tab>
    , mountNode);
guanpu commented 5 years ago

The title property supports HOC, and hence can be used as an alternative for such purpose, closing this.