如何在React中实现支持动态组件/标签的嵌套包裹函数？

Got it, let's tackle this problem step by step. The core idea here is to build the nested wrapper structure either iteratively (working from the inside out) or recursively (working from the outside in)—both approaches will let you handle any number of wrappers, from 0 up to whatever you need.

The Iterative Approach (Inside-Out) #

This method is straightforward: start with your target component, then wrap it in each wrapper starting from the last one in the array (the innermost wrapper) and work your way out to the first element (the outermost wrapper).

Here's the code:

import React from 'react';

function wrapComponent(ComponentToWrap, wrappers = []) {
  // Start with the component we want to wrap as the innermost element
  let wrappedElement = <ComponentToWrap />;

  // Iterate backwards through the wrappers array
  for (let i = wrappers.length - 1; i >= 0; i--) {
    const Wrapper = wrappers[i];
    // Use React.createElement to build each wrapper layer
    // We pass an empty props object by default, but you can extend this later
    wrappedElement = React.createElement(Wrapper, {}, wrappedElement);
  }

  return wrappedElement;
}

How It Works #

Let's use your first example to walk through it:

• Input: wrapComponent(ComponentToWrap, ['div', 'main', 'span'])
• Step 1: Start with <ComponentToWrap />
• Step 2: Wrap it in the last wrapper (span): <span><ComponentToWrap /></span>
• Step 3: Wrap that result in the second-to-last wrapper (main): <main><span><ComponentToWrap /></span></main>
• Step 4: Wrap that in the first wrapper (div): <div><main><span><ComponentToWrap /></span></main></div>
• Final result is exactly what you need!

For custom components like SomeParentComponent, it works the same way—React.createElement handles both HTML tag strings and custom React components seamlessly.

Adding Support for Wrapper Props (Optional) #

If you want to pass props to individual wrappers (like a className to a div), you can modify the function to accept wrapper objects instead of just strings/components:

function wrapComponent(ComponentToWrap, wrappers = []) {
  let wrappedElement = <ComponentToWrap />;

  for (let i = wrappers.length - 1; i >= 0; i--) {
    // Destructure the component and its props (default to empty object if not provided)
    const { component: Wrapper, props = {} } = wrappers[i];
    wrappedElement = React.createElement(Wrapper, props, wrappedElement);
  }

  return wrappedElement;
}

// Usage example with props
wrapComponent(ComponentToWrap, [
  { component: 'div', props: { className: 'outer-container' } },
  { component: 'main', props: { id: 'content-area' } },
  { component: SomeParentComponent, props: { theme: 'dark' } }
]);

The Recursive Approach (Outside-In) #

If you prefer a more concise recursive solution, this works too. We take the first wrapper in the array as the outermost layer, then recursively wrap the component with the remaining wrappers:

import React from 'react';

function wrapComponent(ComponentToWrap, wrappers = []) {
  // Base case: no wrappers left, return the target component
  if (wrappers.length === 0) {
    return <ComponentToWrap />;
  }

  // Split the array into the first wrapper and the rest
  const [outerWrapper, ...remainingWrappers] = wrappers;
  // Wrap the recursive result of the remaining wrappers
  return React.createElement(outerWrapper, {}, wrapComponent(ComponentToWrap, remainingWrappers));
}

Testing the Recursive Version #

Using your second example:

• Input: wrapComponent(ComponentToWrap, ['div', 'main', SomeParentComponent])
• The function first creates a div whose child is the result of wrapComponent(ComponentToWrap, ['main', SomeParentComponent])
• That call creates a main whose child is wrapComponent(ComponentToWrap, [SomeParentComponent])
• That final call creates SomeParentComponent wrapping <ComponentToWrap />
• The end result is the nested structure you need.

Handling Edge Cases #

• If you pass an empty wrappers array, both versions will just return <ComponentToWrap />—perfect for when you don't need any wrapping.
• It works with any number of wrappers (10+ is no problem) since both loops and recursion handle that smoothly.

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