javascript - 用数组中的多个父组件包装组件

Question

有没有办法用从数组传递的多个父组件来包装组件？

这是 HOC 能够处理的事情吗？

const WrapperComponent = props => {

    const wrappers = [ComponentA, ComponentB, ComponentC];

    // Should return something like:
    // return (
    //    <ComponentA><ComponentB><ComponentC>
    //         {props.children}
    //    </ComponentC></ComponentB></ComponentA>
    // );
}

Answer 1

您可以使用 reduceRight 方法，该方法将从最后一个元素开始，该元素将是最内部的组件，并将累加器值设置为传递给 HOC 函数的组件。

const ComponentA = ({ children }) => <div className="component-a">{children}</div>;
const ComponentB = ({ children }) => <div className="component-b">{children}</div>;
const ComponentC = ({ children }) => <div className="component-c">{children}</div>;

const WrapperComponent = (ChildComponent) => {
  const wrappers = [ComponentA, ComponentB, ComponentC];

  return wrappers.reduceRight((Prev, Component) => {
    return <Component>{Prev}</Component>
  }, <ChildComponent/> )
}

const MyComponent = () => <div> My component </div>
const App = () => WrapperComponent(MyComponent)

ReactDOM.render( <App/> , document.querySelector("#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>