ReactJs

Question

我的组件使用了 ReactJs Framework，它是用 Ant Design UI 构建的。我的问题是标签内容的渲染。

我尝试将 LoginForm 组件嵌套到 TabsCard 组件。

注意：LoginForm组件无需嵌套即可独立渲染成功

在我附加的图像上呈现的组件：

这是我的代码：
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;

感谢您的支持！

Answer 1

从 contentList[setActiveTab] 更改为 contentList[activeTab]

完整代码示例

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;

希望对你有所帮助

祝你有愉快的一天！

ReactJs - Ant design Tabs Card 不渲染内容

ReactJs - Ant design Tabs Card does not render content

javascript

antd