Estoy trabajando en la integración de 2 archivos js diferentes, uno está en un componente funcional y el otro está en un componente de clase. Quiero que el archivo del componente de clase se convierta en un componente funcional. Soy nuevo en reactjs y componente de clase. Si esto se puede convertir en un componente funcional, sería útil.
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;Prueba esto
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