Javascript 如何在数组中添加这些元素以自定义reactjs中的代码

我已经用很多if-else逻辑编写了代码。我正在努力改进我的代码。谁能给我推荐一些更好的选择吗。我正在尝试根据以下条件打印数据： functionOne和secondFunction是在多个位置返回组件的方法。 我的代码要点是：如果myFirstDataArray的长度大于3，则打印第二个函数值，否则，再次检查myFirstDataArray的长度，依此类推

const functionOne = (data) => {
    return (
      <SummaryOfValues
        data={data}
      ></SummaryOfValues>
    );
  };

  const secondFunction = (data) => {
    return (
      <ListOfValues
        data={data.info}
      ></ListOfValues>
    );
  };

{
  myFirstDataArray && myFirstDataArray.length >= 3 ? (
    <>
      <>
        {resultedDataArray
          .slice(0, 3)
          .map((data: any) => ({ secondFunction(data); }))}
      </>
    </>
  ) : (
    <>
      <>
        {resultedDataArray
          .slice(0, resultedDataArray.length)
          .map((data: any) => ({ secondFunction(data); }))}
      </>

      {myFirstDataArray && myFirstDataArray.length === 1 ? (
        <>
          {resultedDataArray
            .slice(myFirstDataArray.length)
            .map((data: any) => ({ functionOne(data); }))}
        </>
      ) : null}
      {myFirstDataArray && myFirstDataArray.length === 2 ? (
        <>
          {resultedDataArray
            .slice(myFirstDataArray.length, myFirstDataArray.length + 1)
            .map((data: any) => ({ functionOne(data); }))}
        </>
      ) : null}
    </>
  );
}

const functionOne=（数据）=>{
返回(
);
};
const secondFunction=（数据）=>{
返回(
);
};
{
myFirstDataArray&&myFirstDataArray.length>=3(
{resultedDataArray
.slice（0,3）
.map（（数据：any）=>（{secondFunction（数据）；}））}
) : (
{resultedDataArray
.slice（0，resultedDataArray.length）
.map（（数据：any）=>（{secondFunction（数据）；}））}
{myFirstDataArray&&myFirstDataArray.length==1(
{resultedDataArray
.slice（myFirstDataArray.length）
.map（（数据：any）=>（{functionOne（数据）；}））}
)：null}
{myFirstDataArray&&myFirstDataArray.length==2(
{resultedDataArray
.slice（myFirstDataArray.length，myFirstDataArray.length+1）
.map（（数据：any）=>（{functionOne（数据）；}））}
)：null}
);
}

您如何看待此解决方案

const functionOne = (data) => {
    return (
        <SummaryOfValues
            data={data}
        ></SummaryOfValues>
    );
};

const secondFunction = (data) => {
    return (
        <ListOfValues
            data={data.info}
        ></ListOfValues>
    );
};

{
    myFirstDataArray && myFirstDataArray.length > 0 (
        <>
            <>
                {resultedDataArray
                    .slice(0, 3)
                    .map((data: any) => ({ secondFunction(data); }))}
            </>
            {myFirstDataArray.length < 3 ? (
                <>
                    {resultedDataArray
                        .slice(myFirstDataArray.length - 1)
                        .map((data: any) => ({ functionOne(data); }))}
                </>
            ) : null}
            </>
        );
}

const functionOne=（数据）=>{
返回(
);
};
const secondFunction=（数据）=>{
返回(
);
};
{
myFirstDataArray&&myFirstDataArray.length>0(
{resultedDataArray
.slice（0,3）
.map（（数据：any）=>（{secondFunction（数据）；}））}
{myFirstDataArray.length<3(
{resultedDataArray
.slice（myFirstDataArray.length-1）
.map（（数据：any）=>（{functionOne（数据）；}））}
)：null}
);
}

我希望删除尽可能多的条件渲染。我已经更新了代码。请让我知道你的想法。