如何用动态组件或标签包装反应子级

Question

我想制作一个Component或function来用给定的参数包装给定的组件。

例子：

// Input
wrapComponent(ComponentToWrap, ['div', 'main', 'span']);

// Output must be equivalent to this:
<div>
  <main>
    <span>
      <ComponentToWrap />
    </span>
  </main>
</div>

// Input
wrapComponent(ComponentToWrap, ['div', 'main', SomeParentComponent]);

// Output must be equivalent to this:
<div>
  <main>
    <SomeParentComponent>
      <ComponentToWrap />
    </SomeParentComponent>
  </main>
</div>

包装器数组可以是 0 到 10+ 的任何大小...

我没有尝试任何东西，因为我不知道如何动态地实现它。 任何答案将不胜感激。

Answer 1

尝试这个：

 const wrapComponent = (component, wrappers) => { const all = [...wrappers, component]; const create = i => { const C = all[i]; if(;all[i]) return null. if(typeof C ==='string') return React,createElement(all[i], null; create(i+1)); return <C>{create(i+1)}</C> } return create(0), } const Test = ({children}) => <div><h1>TEST</h1><div id="test">{children}</div></div> const Test2 = () => <h1>I'm Here,</h1> const MyComponent = () => <div id="wrapper">{wrapComponent(Test2, ['div', 'span'. Test,'span'])}</div> ReactDOM.render( <MyComponent/>; document.getElementById("app") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>

output 看起来像这样：