在反应中组合后渲染嵌套对象？答案

【问题标题】：render nested object after combining in react?在反应中组合后渲染嵌套对象？
【发布时间】：2022-01-25 10:28:37
【问题描述】：

我想在 JSON 下渲染到显示的图像

let finalSplit = [
    {
      start: "73",
      end: "76",
      splits: [
        {
          word: "Now",
          start: "73",
          color:"#FF6262",
          name:"extra",
          end: "76",
        },
      ],
    },
    {
      start: "27",
      end: "72",
      splits: [
        {
          word: "GitHub Actions",
          start: "31",
          name:"sub1",
          color:"#DFF652",
          end: "45",
        },
        {
          word: "the GitHub Actions “New Workflow” experience.",
          start: "27",
          name:"main",
          color:"#62FF8E",
          end: "72",
        },
        {
          word: "GitHub",
          start: "31",
          name:"sub2",
          color:"#9483FF",
          end: "37",
        },
      ],
    },
  ];

我尝试循环每个数组并渲染，但由于它的格式重复，无法渲染聚合版本

const Mark = () => {
    
    return (
        <>
        {
            finalSplit.map((i)=>{
                return (
                    <div>
                        i.split.map((j)=>{
                            <div>{j.text}</div>
                        })
                    </div>
                )
            })
        }
        <>
    );
}

需要一些如何生成其他结构 text : “宣布改进 GitHub Actions “新工作流”体验。现在，当您想要创建时” 以及我们得到偏移量的每个地方

【问题讨论】：

标签： javascript arrays reactjs concatenation jsx

【解决方案1】：

这在某种程度上适用于sorting 和absolute positioning。如果您有以像素为单位的实际位置值，它将与您提供的图像一样工作。

const Mark = () => {
  const sortData = (data) => {
    return data.sort((a, b) => {
      if (a.start === b.start) {
        return b.end - a.end;
      } else {
        return a.start - b.start;
      }
    });
  };

  const sortNestedData = (data) => {
    const unsortedData = data.map((item) => {
      if (item?.splits) {
        return { ...item, splits: sortNestedData(item.splits) };
      }
      return item;
    });
    return sortData(unsortedData);
  };

  const renderNestedData = (data) => {
    const myData = data.map((item) => {
      return (
        <div
          style={{
            backgroundColor: item.color,
            position: "absolute",
            left: `${item.start}px`,
            // width: `${item.end - item.start}px`,
            top: "0px"
          }}
        >
          {item.word}
          {item.splits && renderNestedData(item.splits)}
        </div>
      );
    });
    return myData;
  };

  return (
    <div
      style={{
        backgroundColor: "lightblue",
        display: "flex",
        flexDirection: "row",
        position: "absolute"
      }}
    >
      {renderNestedData(sortNestedData(finalSplit))}
    </div>
  );
};

export default Mark;

代码沙箱 => https://codesandbox.io/s/festive-violet-cc8s7?file=/src/App.js

【讨论】：