您面临的问题

1. 如果数据长度小于四，我将提供一个加号按钮以在更多选项卡上创建（给它默认名称），但我不知道如何创建新的。

在这里你想获得一个新名称，即页面上的一个带有文本输入的表单，随机生成名称，使用提示，就像我在下面所做的那样。调用setData并使用功能状态更新将现有数据传播到新数组中并附加新数据对象。

const addNewTab = () => {
  /**
   * window.prompt is just a quick way to request input from user. 
   */
  const name = window.prompt('Enter Name');

  /**
   * logic to generate next id, but could be anything really
   */
  const id = generateId();

  if (name) {
    setData((data) => [...data, new Data(id, name)]);
  }
};

2. 当我点击侧边按钮在选项卡内创建一个潜水，然后我转到另一个选项卡并再次返回时，我希望创建的div不应该被删除。

这里发生了一些事情。首先，您data1在函数体中定义了它，以便在每个渲染周期重置它。保持数据处于状态，data可以作为初始状态提供。其次，您需要添加创建的元素。通过更新状态来做到这一点。

移动data1出组件并定义与初始化的局部组件的状态data（更新来自渲染的所有引用data到data）。

const [data, setData] = useState(data1);

类似于添加新选项卡的方法，获取新数据名称和标题。这里我们调用setData并再次使用功能状态更新，但这次我们将现有状态映射到一个新数组。当数组索引与活动选项卡索引匹配时，这就是我们需要更新的数据对象。将其展开myData到一个新数组中并附加新的数据对象。如果 index 不匹配，则只返回元素。

const Create_element = () => {
  /**
   * window.prompt is just a quick way to request input from user. 
   */
  const data_name = window.prompt('Enter Data Name');
  const data_title = window.prompt('Enter Data Title');

  if (data_name && data_title) {
    setData(data => data.map((el, i) => i === active_menu ? {
      ...el,
      myData: [...el.myData, { data_name, data_title }],
    } : el))
  }
};

3. 假设我有 3 个选项卡（数据），因此当页面加载我想要显示的第一个选项卡数据时，但它没有显示，我需要单击那里只显示它。

这里的问题是由保持一个单独的nestedData状态对象引起的，该对象仅在单击选项卡时才更新。将新元素添加到活动选项卡的myData数组时nestedData不会更新。这里的解决方案是直接在 UI 中简单地呈现嵌套数据。

更新选项卡的 onClick 处理程序以简单地设置活动菜单（索引）。

onClick={() => setactive_menu(index)}

myData直接从新data状态渲染。

data[active_menu].myData.map((li, index) => (...

4. 如果数据为空，那么我最多可以创建 4 个选项卡，这也是我想要一些想法来做到的。

有条件地呈现 ADD 按钮将控制这一点。

{data.length < 4 && <button onClick={addNewTab}>ADD</button>}

完整代码

import React, { useState } from "react";
import "./styles.css";

import RightBar from "./Right_option";
import NEsted from "./Nested";

import "bootstrap/dist/css/bootstrap.min.css";

/**
 * https://stackoverflow.com/questions/63814645/how-to-create-dynamic-elements-inside-global-tabs
 */

const data1 = [
  {
    id: 1,
    name: "Maxi",
    myData: [
      {
        data_name: "div1",
        data_title: "div1 tittle"
      },
      {
        data_name: "div1",
        data_title: "div tittle"
      }
    ]
  },
  {
    id: 2,
    name: "Phill",
    myData: [
      {
        data_name: "div21",
        data_title: "div21 tittle"
      }
    ]
  }
];

/**
 * Data object constructor
 * @param {number} id new data object id
 * @param {string} name new data object name
 * @example
 * new Data(1, 'Bill')
 */
const Data = (id, name) => ({ id, name, myData: [] });

/**
 * Id generator hook
 * @param {number} [seed=0] initial id generator value
 * @returns {function}
 */
const useIdGenerator = (seed = 0) => {
  function* genId(seed = 0) {
    let i = seed;
    while (true) yield i++;
  }

  const generator = genId(seed);

  return () => generator.next().value;
};

export default function App() {
  const generateId = useIdGenerator(5);

  const [data, setData] = useState(data1);
  const [active_menu, setactive_menu] = useState(0);

  const Create_element = () => {
    /**
     * window.prompt is just a quick way to request input from user.
     */
    const data_name = window.prompt("Enter Data Name");
    const data_title = window.prompt("Enter Data Title");

    if (data_name && data_title) {
      setData((data) =>
        data.map((el, i) =>
          i === active_menu
            ? {
                ...el,
                myData: [...el.myData, { data_name, data_title }]
              }
            : el
        )
      );
    }
  };

  const addNewTab = () => {
    /**
     * window.prompt is just a quick way to request input from user.
     */
    const name = window.prompt("Enter Name");

    if (name) {
      setData((data) => [...data, new Data(generateId(), name)]);
    }
  };

  return (
    <div className="App row">
      {data.map((li, index) => (
        <div className="col-4 col-sm-4 col-md-3 col-lg-3 col-xl-3" key={index}>
          <div
            className={
              index === active_menu
                ? "row dashboard_single_cont_active"
                : "row dashboard_single_cont"
            }
            onClick={() => setactive_menu(index)}
          >
            <div className="dashboard_name col-10 col-sm-10 col-md-9 col-lg-10 col-xl-10">
              {li.name}
            </div>
            <div
              className={
                active_menu === index
                  ? "dashboard_option_active col-2 col-sm-2 col-md-3 col-lg-2 col-xl-2"
                  : "dashboard_option col-2 col-sm-2 col-md-3 col-lg-2 col-xl-2"
              }
              align="center"
            ></div>
          </div>
        </div>
      ))}

      {data.length < 4 && <button onClick={addNewTab}>ADD</button>}

      <div className="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11">
        <div className="row">
          {data[active_menu].myData.map((li, index) => (
            <div
              key={index}
              className="col-11 col-sm-11 col-md-8 col-lg-6 col-xl-6"
            >
              <NEsted data={li} />
              <br></br>
            </div>
          ))}
        </div>
      </div>
      <RightBar Create_element={Create_element} />
    </div>
  );
}