javascript - 采用多个组件的可重用 HOC

Question

我有这个简单的高阶组件，它工作正常但它只接受一个组件:

let VerticalSlider = (Komponent) => {
  return (props) => (
    <div className='slider'>
      <Komponent {...props}/>
    </div>
  );
};

如何重写 HOC 以接受多个组件(未知数量)并将它们作为 sibling (一个接一个地放在彼此下面)连同它们各自的 props 一起返回？

我假设这就是您调用具有多个组件的 HOC 的方式，因为它只是一个函数:

VerticalSlider(MyComponent, MyOtherComponent)

我知道如何接受和销毁未知数量的“正常” Prop ，但在传入组件时我却迷失了方向。

Answer 1

你可以这样做:

import React, { Component } from 'react';
import { render } from 'react-dom';

let VerticalSlider = (...komponents) => {
  return (props) => (
    <div className='slider'>
      { komponents.map((K, i) => <K {...props.ps[i]} /> ) }
    </div>
  );
};

const Apple = props =>
  <div>{ props.name }</div>;

const Orange = props =>
  <div>{ props.desc }</div>;

const MyComp = VerticalSlider(Apple, Orange);

const App = () =>
  <div>
    Hello
    <MyComp 
      ps={[{ name: 'apple' }, { desc: 'orange' }]} />
  </div>

render(<App />, document.getElementById('root'));

但它有点丑，你的同事会讨厌你。保持简单，不要想太多。这是一个 demo