删除 Div Wrapper 或更改嵌套地图中某些分组元素的类名称

Question

我有以下来自嵌套.map 的输出 html，它是根据来自使用 graphQL 查询的 cms 的数据从 for 循环构造的。

1. 我要么需要任何 div 包装删除任何 NewBlock 部分， 或者我需要它们具有与 BlockGridWrapper 元素的包装 div 不同的类名

2. 我需要包含任何 BlockGridWrapper 组的 div 要么是唯一带有包装 div 的组 或具有与 NewBlock 的包装 div 不同的 className

这里是构造数据数组的for循环

const wrap = data => {
    const res = [[data[0]]];
    let curr = data[0];
    // let curr = 0;
    let idx = 0;
    for (let i = 1; i < data.length; i++) {
      if (data[i].__typename === curr.__typename) {
        res[idx].push(data[i]);
      } else {
        curr = data[i];
        idx += 1;
        res[idx] = [curr];
      }
    }
    return res
  };

  const wrappedData = wrap(data.datoCmsProject.projectBlock);

这是console.log的输出wrappedData，所以有一个类型名，我正在检查，我最理想的是div包装器有一个依赖于该类型名的className，但嵌套循环发生在div之后包装器所以我被困在如何实现这个

然后这是我的嵌套.map。我需要包装 div 有一个基于类型名的条件类，理想情况下仅适用于 BlockGridWrapper，但是我不能让它单独包装每个元素，因为我需要它来包装整个块，但对于 NewBlock 它没有不管它是否有包装div 或者它是否有不同的类名都可以。但是我需要保留这些元素的顺序，因为它是从 cms 填充的。

{
      wrappedData.map(list => {
        return (    
          <div>   //I Need this div to have a conditional class based on the typename                  
            {list.map(l =>         
              l.__typename === "DatoCmsSingleProjectBlockContent" ? (
                <NewBlock >text1</NewBlock>
              ) : (
                <BlockGridWrapper>
                  text2
                </BlockGridWrapper>
              )
            )           
            }
          </div>
        );
      })
    }

Answer 1

删除 Div Wrapper 或更改某些上的类名称 ...

扭转问题... 不要渲染某事而不是删除某事。

从那时起，我们面临着常见的条件渲染问题。

在这种情况下（数据结构）我们可以简单地检查循环前第一个元素的类型：

{
  wrappedData.map(list => {
    let isNewBlock = list[0].__typename === "DatoCmsSingleProjectBlockContent"
    return (    
      {isNewBlock ? (<div class="nb">) : (<div>)}
        {list.map(l =>         
          l.__typename === "DatoCmsSingleProjectBlockContent" ? (
            <NewBlock >text1</NewBlock>
          ) : (
            <BlockGridWrapper>
              text2
            </BlockGridWrapper>
          )
        )           
        }
      </div>
    );
  })
}

或“删除 div 包装器”（使用片段）：

{
  wrappedData.map(list => {
    let isNewBlock = list[0].__typename === "DatoCmsSingleProjectBlockContent"
    return (    
      {isNewBlock ? (<>) : (<div>)}
        {list.map(l =>         
          l.__typename === "DatoCmsSingleProjectBlockContent" ? (
            <NewBlock >text1</NewBlock>
          ) : (
            <BlockGridWrapper>
              text2
            </BlockGridWrapper>
          )
        )           
        }
      {isNewBlock ? (</>) : (</div>)}
    );
  })
}

甚至更简单/更具可读性，例如：

{
  wrappedData.map(list => {
    let isNewBlock = list[0].__typename === "DatoCmsSingleProjectBlockContent"
    if (isNewBlock) return (    
      <>
        {list.map(l => (
            <NewBlock >{l.titleOfSection}</NewBlock>
          )
        )
        }
      </>
    );
    // the rest - notice different 'fieldset'
    return (    
      <div>
        {list.map(l => (
            <BlockGridWrapper>{l.titleOfGridSection}</BlockGridWrapper>
          )
        )
        }
      </div>
    );

  })
}