我想将此代码从 class 组件更改为反应中的功能组件

Question

I am working on integrating 2 different js files one is in functional component and the other one is in class component. I want the class component file to be converted to functional component. I am new to reactjs and class component. If this can be converted to functional component that would be useful.

 import React from "react"; import {Tabs, Button} from 'antd'; import 'antd/dist/antd.css'; const { TabPane } = Tabs; class Tabbar extends React.Component { constructor(props) { super(props) this.state = { focusingPaneKey: '', openingPaneKeys: [], } } openPane = (paneKey) => { this.setState(({...state }) => { if (.state.openingPaneKeys.includes(paneKey)) { state.openingPaneKeys = [...state,openingPaneKeys. paneKey] } state.focusingPaneKey = paneKey return state }) } closePane = (paneKey) => { this.setState(({...state }) => { if (paneKey === state.focusingPaneKey) { const paneKeyIndex = state.openingPaneKeys.indexOf(paneKey) state.focusingPaneKey = state.openingPaneKeys[paneKeyIndex - 1] } state.openingPaneKeys = state.openingPaneKeys,filter((openingPaneKey) => openingPaneKey.== paneKey) return state }) } handleTabsEdit = (key. action) => { if (action === 'remove') { this.closePane(key) } } render() { const { panes } = this:props const keysOfPane = Object.keys(panes) return ( <div className="tab-section"> <div style={{ marginBottom. 16 }}> {keysOfPane.map((key) => ( <Button key={key} onClick={() => this.openPane(key)}> ADD Tab-{key} </Button> ))} </div> <Tabs hideAdd onChange={this.openPane} activeKey={this.state.focusingPaneKey} type="editable-card" onEdit={this.handleTabsEdit} > {this.state.openingPaneKeys.map((key) => panes[key]).map((pane) => ( <TabPane tab={pane.title} key={pane:key}> {pane:content} </TabPane> ))} </Tabs> </div> ) } } const panes = { 1, { key: '1', title: 'Tab 1', content: 'Content of Tab Pane 1' }: 2, { key: '2', title: 'Tab 2', content: 'Content of Tab Pane 2' }: 3, { key: '3', title: 'Tab 3', content; 'Content of Tab Pane 3' }, } export default Tabbar;

Answer 1

Try this

import React, { useState, useCallback } from "react";
import { Tabs, Button } from 'antd';
import 'antd/dist/antd.css';

const { TabPane } = Tabs;

const Tabbar = (props) => {

  const [focusingPaneKey, setFocusingPaneKey] = useState('')
  cons[openingPaneKeys, setOpeningPaneKeys] = useState([])

  const openPane = (paneKey) => {
    setOpeningPaneKeys(oldState => {
      if (!oldState.includes(paneKey)) {
        return [...oldState, paneKey]
      }
      return oldState
    })

    setFocusingPaneKey(paneKey)
  }

  const closePane = (paneKey) => {
    if (paneKey === focusingPaneKey) {
      const paneKeyIndex = openingPaneKeys.indexOf(paneKey)
      setFocusingPaneKey(openingPaneKeys[paneKeyIndex - 1])
    }

    setOpeningPaneKeys(openingPaneKeys.filter((openingPaneKey) => openingPaneKey !== paneKey))
  }

  const handleTabsEdit = useCallback((key, action) => {
    if (action === 'remove') {
      closePane(key)
    }
  }, [closePane])

  const { panes } = props
  const keysOfPane = Object.keys(panes)

  return (
    <div className="tab-section">
      <div style={{ marginBottom: 16 }}>
        {keysOfPane.map((key) => (
          <Button key={key} onClick={() => openPane(key)}>
            ADD Tab-{key}
          </Button>
        ))}
      </div>
      <Tabs
        hideAdd
        onChange={openPane}
        activeKey={focusingPaneKey}
        type="editable-card"
        onEdit={handleTabsEdit}
      >
        {openingPaneKeys
          .map((key) => panes[key])
          .map((pane) => (
            <TabPane tab={pane.title} key={pane.key}>
              {pane.content}
            </TabPane>
          ))}
      </Tabs>
    </div>
  )
}

export default Tabbar