Tabs 标签栏

() => {
  let id = 4
  const [tablist, settablist] = React.useState([
    {
      name: '标签1',
      value: '1',
    },
    {
      name: '标签2',
      value: '2',
    },
    {
      name: '标签3',
      value: '3',
    },
  ])
  return (
    <div style={{ margin: '10px' }}>
      <Tabs type="border-card" currentName="1">
        {tablist.map((item, index) => {
          return (
            <Tabs.Pane key={index} label={`${item.name}`} name={`${index}`}>
              {item.name}
            </Tabs.Pane>
          )
        })}
      </Tabs>
    </div>
  )
}

() => {
  const [tabindex, settabindex] = React.useState(4)
  const [tablist, settablist] = React.useState([
    {
      name: '标签1',
      value: '1',
    },
    {
      name: '标签2',
      value: '2',
    },
    {
      name: '标签3',
      value: '3',
    },
  ])
  function tabAdd() {
    let _list = tablist.slice()
    _list.push({
      value: `${tabindex}`,
      name: `标签${tabindex}`,
    })
    let index = tabindex + 1
    settabindex(index)
    settablist(_list)
  }
  return (
    <div style={{ margin: '10px' }}>
      <Tabs onTabAdd={tabAdd} type="border-card" currentName="1" addable>
        {tablist.map((item, index) => {
          return (
            <Tabs.Pane key={index} label={`${item.name}`} name={`${index}`}>
              {item.name}
            </Tabs.Pane>
          )
        })}
      </Tabs>
    </div>
  )
}

() => {
  const [tabindex, settabindex] = React.useState(4)
  const [tablist, settablist] = React.useState([
    {
      name: '标签1',
      value: '1',
    },
    {
      name: '标签2',
      value: '2',
    },
    {
      name: '标签3',
      value: '3',
    },
  ])
  function tabAdd() {
    let _list = tablist.slice()
    _list.push({
      value: `${tabindex}`,
      name: `标签${tabindex}`,
    })
    let index = tabindex + 1
    settabindex(index)
    settablist(_list)
  }
  return (
    <div style={{ margin: '10px' }}>
      <Tabs
        onTabAdd={tabAdd}
        type="border-card"
        currentName="1"
        addable
        closable
        editable
      >
        {tablist.map((item, index) => {
          return (
            <Tabs.Pane key={index} label={`${item.name}`} name={`${index}`}>
              {item.name}
            </Tabs.Pane>
          )
        })}
      </Tabs>
    </div>
  )
}