reactjs - 在反应中抽象组件映射

Question

想知道是否有一种在 React 中反复抽象出地图的好方法。我一直在思考 HOC 或钩子的思路，但坦率地说，我对这是否可能有点茫然。这是我的简化设置，在整个项目中重复了数十次：

const SomePage = () => {
  return (
    <>
      <SomeComponentMap />
      <SomeOtherComponentMap />
      <SomeThirdComponentMap />
    </>
  )
}

const SomeComponentMap = (content) => {
  return content.map((block, i) => {
    const Component = ADAPTORS[block.component] ?? (() => <></>);

    return (
      <Wrapper> 
        <Component />
      </Wrapper>
    )
  })
}

const ADAPTORS = {
  Intro: IntroAdaptor,
  LargeIntro: LargeIntroAdator,
  SmallIntro: SmallIntroAdaptor
}

这种抽象工作有一定的限制。一方面，组件SomeComponent不是硬编码的，而是由来自 cms 的数据决定的，因此const Component = ADAPTORS[block.component]. 其次，根组件 ( SomeComponentMap) 的意图需要保持可读性，因此不能选择诸如组件包装器之类的组件<Map content={data} map={SomeComponentMap} />。

上述设置有效，但它为我的设置添加了第三层，即page → componentMap → dataAdaptor → representationalComponent