0
184
ViewsReactJs: la tarjeta de pestañas de diseño Ant no muestra el contenido
Mis componentes usaron ReactJs Framework que se construyó con Ant Design UI . Mi estancamiento es la representación en el contenido de las pestañas.
Intento anidar el componente LoginForm en el componente TabsCard .
Nota : el componente LoginForm puede procesarse correctamente de forma independiente sin anidar el caso.
Componente representado en la imagen que adjunto:
Aquí está mi código:
TabsCard.js
import React, { useState } from 'react'; import { Card } from 'antd'; import LoginForm from '../LoginForm/index.js'; function TabsCard() { const tabList = [ { key: 'tab1', tab: 'Sign in' }, { key: 'tab2', tab: 'Sign up' } ]; const contentList = { tab1: <LoginForm />, tab2: <p>signup</p>, }; const [activeTab, setActiveTab] = useState('tab1'); const handleTabChange = key => { setActiveTab(key); }; return ( <Card style={{ width: '400' }} tabList={tabList} activeTabKey={activeTab} onTabChange={key => { handleTabChange(key); }} > {contentList[setActiveTab]} </Card> ); } export default TabsCard;¡Gracias por tu apoyo!
·
Juan Pablo Isaza
1 answers
Answer question0
Cambiar de contentList[setActiveTab] a contentList[activeTab]
Ejemplo de código completo
import React, { useState } from 'react'; import { Card } from 'antd'; import 'antd/dist/antd.css'; function TabsCard() { const tabList = [ { key: 'tab1', tab: 'Sign in' }, { key: 'tab2', tab: 'Sign up' } ]; const contentList = { tab1: <div>Login form</div>, tab2: <p>signup</p>, }; const [activeTab, setActiveTab] = useState('tab1'); const handleTabChange = key => { setActiveTab(key); }; return ( <Card style={{ width: '400' }} tabList={tabList} activeTabKey={activeTab} onTabChange={key => { handleTabChange(key); }} > {contentList[activeTab]} </Card> ); } export default TabsCard;espero haberte ayudado
¡Que tengas un lindo día!
·
Juan Pablo Isaza
Report
Answer question