reactjs 动态生成多个tab如何在初始化完成后得到第一个tab或者触发第一个 tab的 click

在React中动态生成多个tab，你可以使用state来控制当前显示的tab以及在初始化完成后触发第一个tab的click事件。

首先，创建一个Tab组件，其中包含tab标题和对应的内容：

import React, { useState } from 'react';

const Tab = ({ title, content }) => {
  return (
    <div>
      <h2>{title}</h2>
      <div>{content}</div>
    </div>
  );
};

export default Tab;

然后，在父组件中使用该Tab组件来动态生成多个tab：

import React, { useState } from 'react';
import Tab from './Tab';

const TabContainer = () => {
  const [currentTab, setCurrentTab] = useState(0); // 用于控制当前显示的tab

  // tab数据
  const tabs = [
    {
      title: 'Tab 1',
      content: 'Content 1',
    },
    {
      title: 'Tab 2',
      content: 'Content 2',
    },
    {
      title: 'Tab 3',
      content: 'Content 3',
    },
  ];

  // 切换tab
  const handleTabClick = (index) => {
    setCurrentTab(index);
  };

  return (
    <div>
      <div>
        {tabs.map((tab, index) => (
          <button key={index} onClick={() => handleTabClick(index)}>
            {tab.title}
          </button>
        ))}
      </div>
      <div>
        {tabs.map((tab, index) => (
          <Tab key={index} title={tab.title} content={tab.content} />
        ))}
      </div>
    </div>
  );
};

export default TabContainer;

这样，你就可以根据当前的currentTab来控制要显示的tab内容了。

如果你想在初始化完成后得到第一个tab，可以在useEffect钩子函数中触发第一个tab的click事件：

import React, { useState, useEffect } from 'react';
import Tab from './Tab';

const TabContainer = () => {
  const [currentTab, setCurrentTab] = useState(0); // 用于控制当前显示的tab

  // tab数据
  const tabs = [
    {
      title: 'Tab 1',
      content: 'Content 1',
    },
    {
      title: 'Tab 2',
      content: 'Content 2',
    },
    {
      title: 'Tab 3',
      content: 'Content 3',
    },
  ];

  // 切换tab
  const handleTabClick = (index) => {
    setCurrentTab(index);
  };

  useEffect(() => {
    // 初始化完成后触发第一个tab的click事件
    handleTabClick(0);
  }, []);

  return (
    <div>
      <div>
        {tabs.map((tab, index) => (
          <button key={index} onClick={() => handleTabClick(index)}>
            {tab.title}
          </button>
        ))}
      </div>
      <div>
        {tabs.map((tab, index) => (
          <Tab key={index} title={tab.title} content={tab.content} />
        ))}
      </div>
    </div>
  );
};

export default TabContainer;

这样，初始化完成后第一个tab会被选中