如何在全局选项卡中创建动态元素

Question

我正在使用 react hooks，遇到了一个我现在卡住的问题。

我有一个 json 数据，每当用户 logs in 时我都会得到这些数据，因此我正在创建一个显示 user names 的顶部栏，当用户单击这些名称时，我将显示他们创建或呈现的一些数据他们在数据库中，我已经在数据中获得了这些数据

我从服务器获取的数据

 let data=   [
  {
    "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"
      }
    ]
  }
]

在我从顶部选择的名称中，我想要在其上创建新 div 的一侧有一个按钮。

所以假设我已经列出了topbar 并且总共有 3 个数据，即 3 个名称，所以如果数据长度小于 4 我正在做的事情，显示一个加号按钮来创建一个更多选项卡，所以用户可以创建多一个标签，然后他们可以在每个标签内创建一个 div，

我做了什么

我正在填充顶部栏以及当我单击侧边按钮时，我正在该选定选项卡内创建一个 div。

我面临的问题

• 如果数据长度小于四，我将提供一个加号按钮以在更多选项卡上创建（为其提供默认名称），但我不知道如何创建新选项卡。
• 当我单击侧边按钮在选项卡内创建一个潜水，然后我转到另一个选项卡并再次返回时，我希望创建的 div 不应该被删除。
• 假设我有 3 个选项卡（数据），所以当页面加载我想要显示的第一个选项卡数据时，但它没有显示，我需要点击那里，它才会显示。
• 如果数据为空，那么我最多可以创建 4 个选项卡，这也是我=想要一些想法来做的。

我在此处链接我的代码沙箱，以便于理解我所做的和我正在尝试做的事情

Code sandbox

在代码沙箱中我已经写了所有代码，请检查一下。

我已经解释了我正在尝试做的每一件事，我知道如何编码，但没有得到任何想法或方法。

如果没有用户数据，那么我将从 1 开始为该用户创建选项卡和嵌套元素。

在每个创建的每个新元素中都会有一个保存按钮，所以我会这样做，我唯一需要注意的是，当我创建它们后，当我从一个选项卡转到另一个选项卡时，不会丢失 ui 上的数据

export default function App() {
  const [active_menu, setactive_menu] = useState(0);
  const [nestedData, setnestedData] = useState(null);

  let 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"
        }
      ]
    }
  ];
  const Tab_click = (index, li) => {
    setactive_menu(index);
    setnestedData(li);
  };

  const Create_element = () => {
    //here I don't know how to create new elements
  };
  const addnewTab=()=>{
    
  }
  return (
    <div className="App row">
      {data1.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={() => Tab_click(index, li)}
          >
            <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>
      ))}
      {data1.length < 4 && (
       <span
       onClick={addnewTab}
       >ADD</span>
      )}
      <div className="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11">
        <div className="row">
          {nestedData !== null &&
            nestedData.myData.map((li, index) => (
              <div 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>
  );
}

Answer 1

您面临的问题

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

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

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)]);
  }
};

1. 当我单击侧边按钮在选项卡内创建一个潜水，然后我转到另一个选项卡并再次返回时，我希望创建的 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))
  }
};

1. 假设我有 3 个选项卡（数据），所以当页面加载我想要显示的第一个选项卡数据时，但它没有显示，我需要点击那里，它才会显示。

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

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

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

直接从新的data 状态渲染myData。

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

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

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

{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>
  );
}