Javascript 如何在盖茨比中循环使用ACF灵活内容？

我在Wordpress中创建了一个页面，该页面具有灵活的内容布局，目前包含两个不同的块，但是我很难理解如何在循环中正确呈现每个不同的块类型

// test.tsx

const Test: FunctionComponent = ({ data }): ReactElement => {
  const { layouts } = data.wordpressPage.edges.node.acf.layouts_page;
  return (
    <Layout>
      <SEO title="Test" />

      <main>
        {layouts.map((layout, index) => {
          if (WordPressAcf_two_col_image_text) {
            return <TwoColImageText content={layout.content} />;
          } else if (WordPressAcf_two_col_text) {
            return <TwoColText content={layout.content} />;
          }
        })}
      </main>
    </Layout>
  );
};

export default Test;

export const query = graphql`
  query {
    wordpressPage(slug: { eq: "test-flexible-content" }) {
        edges {
          node {
            acf {
              layouts_page {
                ... on WordPressAcf_two_col_image_text {
                  id
                  heading
                  content
                  tag
                }
                ... on WordPressAcf_two_col_text {
                  id
                  content
                  heading
                }
              }
            }
          }
        }
      }
`;

//test.tsx
常量测试：FunctionComponent=（{data}）：ReactElement=>{
const{layouts}=data.wordpressPage.edges.node.acf.layouts\u页面；
返回(
{layouts.map（（布局，索引）=>{
如果（文字按ACF\u两列\u图像\u文本）{
返回；
}else if（文字按ACF两列文字）{
返回；
}
})}
);
};
导出默认测试；
export const query=graphql`
质疑{
wordpressPage（slug:{eq:“测试灵活内容”}）{
边缘{
节点{
活性炭纤维{
页面布局{
…在WordPressAcf\u两列\u图像\u文本上{
身份证件
标题
内容
标签
}
…在WordPressAcf两列文字上{
身份证件
内容
标题
}
}
}
}
}
}
`;

您可以使用

\uu typename

字段来获取GraphQL类型。这超出了内联片段的范围，因为它是联合中所有类型之间的共享字段

layouts_page {
  __typename

  ... on WordPressAcf_two_col_image_text {
    # …
  }
  ... on WordPressAcf_two_col_text {
    # …
  }
}

然后，您的条件将检查身份，如下所示：

layout.\uuuuTypeName==“WordPressAcf\uTwo\uCol\uImage\uText”

但是，有一种比使用大型内联条件更优雅的方式来构建整个过程：

const typeMap={
WordPressAcf\u两列图像\u文本：两列图像文本，
WordPressAcf两列文字：两列文字，
}
常量测试：FunctionComponent=（{data}）：ReactElement=>{
const layouts=data.wordpressPage.edges.node.acf.layouts\u页面；
返回(
{layouts.map（{uuuu typename，…layoutProps}），index）=>
React.createElement（typeMap[\uuu typename]，{key:index，…layoutProps}）
)}
);
};