Question

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

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

如何重写HOC以接受多个组件（未知号码）并将它们作为兄弟姐妹（彼此之间逐个）返回以及各自的道具？

我认为这是你用多个组件调用HOC的方式，因为它只是一个功能：

VerticalSlider(MyComponent, MyOtherComponent)

我知道如何接受和破坏未知数量的＆＃34;正常＆＃34;道具，但我是一个但在传递组件时迷失在这里。

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，需要多个组件

1 个答案: