React中如何指定嵌套子组件渲染位置并限制子组件使用范围

1. 抽离嵌套的Page.Item到指定位置渲染 #

你可以通过React内置的子元素遍历API，筛选分离出Page.Item组件单独渲染，不需要修改原有样式：

• 给Page.Section和Page.Item添加唯一的displayName标识，用于子元素类型判断
• 在Page组件内递归遍历所有子元素，把所有Page.Item实例筛选出来存入单独数组
• 渲染Section相关内容时过滤掉Page.Item，只渲染其余内容，把收集到的Item数组放到无样式的指定区域渲染即可

2. 限制组件仅能在Page内部调用 #

通过Context上下文即可实现调用校验：

• 在Page组件内部创建专属Context，渲染时传入有效值
• 在Section和Item组件内部消费这个Context，若没有获取到有效值则直接抛出错误，阻止外部单独调用

修改后完整代码 #

import { createContext, useContext, Children, isValidElement, cloneElement } from 'react';

// Page专属上下文，用于校验子组件调用范围
const PageContext = createContext(null);

const Page = ({ children }) => {
  // 存储收集到的所有Page.Item
  const pageItems = [];

  // 递归遍历子元素，收集Item同时过滤掉Item返回剩余内容
  const filterAndCollectItems = (children) => {
    return Children.map(children, (child) => {
      if (!isValidElement(child)) return child;
      // 匹配到Page.Item，收集后返回null不在当前位置渲染
      if (child.type.displayName === 'Page.Item') {
        pageItems.push(child);
        return null;
      }
      // 匹配到Page.Section，递归遍历它的子元素
      if (child.type.displayName === 'Page.Section') {
        return cloneElement(child, {}, filterAndCollectItems(child.props.children));
      }
      return child;
    })
  };

  const processedChildren = filterAndCollectItems(children);

  return (
    <PageContext.Provider value={true}>
      <>
        <div
          className='bg-gray-100 border-b-2 flex flex-col top-0 fixed w-screen transition-height duration-300 mt-16'
        >
          <SomeComponent/>
          {/* 过滤掉Item的Section内容，受当前div样式影响 */}
          {processedChildren}
        </div>
        {/* 单独渲染收集到的所有Item，不受上层div样式影响 */}
        {pageItems}
      </>
    </PageContext.Provider>
  );
};

const Section = ({ children }) => {
  // 校验是否在Page内部调用
  const isInPage = useContext(PageContext);
  if (!isInPage) throw new Error('Page.Section 仅能在Page组件内部使用');
  return (
    <>
      <ConfiguratorTab/>
      {children}
    </>
  );
};
Section.displayName = 'Page.Section';

const Item = () => {
  // 校验是否在Page内部调用
  const isInPage = useContext(PageContext);
  if (!isInPage) throw new Error('Page.Item 仅能在Page组件内部使用');
  return (
    <>
      <Form/>
    </>
  );
};
Item.displayName = 'Page.Item';

Page.Section = Section;
Page.Item = Item;

export default Page;

内容的提问来源于stack exchange，提问作者CodingBrah