如何用動態組件或標簽包裝反應子級

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 看起來像這樣：