采用多个组件的可重用 HOC

Question

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

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

如何重写 HOC 以接受多个组件（未知数量）和 return 它们作为兄弟姐妹（一个接一个地在彼此下面）以及它们各自的 props？

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

VerticalSlider(MyComponent, MyOtherComponent)

我知道如何接受和销毁未知数量的 "normal" 道具，但是当涉及到传入组件时，我却迷失在这里。

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

采用多个组件的可重用 HOC

Reusable HOC that takes multiple components

javascript

reactjs

higher-order-functions

higher-order-components