使用React的高阶组件以及多个组件作为参数

Question

我对本机反应（以及为此目的而使用的React）还比较陌生，并且我刚刚开始使用高阶组件。 我知道，这些都应该采取一个组件作为参数的回报一种其他成分。

我的问题是我希望我的HOC()函数采用多个参数，即类似HOC:: C: React.Component, D: React.Component => H: React.Component （类似于Haskell语法）。

现在，问题（也是我发布此问题的原因）是，由于我必须传递道具的方式，它使我感到我的代码有些笨拙。 我最终要做的是一个函数，该函数需要两个数组，第一个组件数组和第二个props，必须以相同的顺序给出。 （这样propList[i]是组件componentList[i]的props对象）。

类似于（假设所有导入已完成）：

class MyComponent extends React.Component {
  render() {
    return <Text>{this.props.name}</Text>
  }
}
const HOC = (componentList, propsList) =>
class extends React.Component {
  render() {
    return(
      <View>
        {componentList.map( (Component, index) => {
          return <Component {...propsList[index]} />
        })}
      </View>
    )
  }
}
class App extends React.Component {
  render (){
    //this call is what makes me uncomfortable
    const DoubleComponent = HOC([MyComponent, MyComponent],[{name: 'first'}, {name: 'second'}]); 
    return(
      <DoubleComponent />
    )
  }
}

我已经设法构建了这样的东西，并且它可以满足我的要求，但是这个问题更多地是关于：

• 这是一件坏事吗？ （例如，由于在不同的地方指定了道具，我觉得这样会伤害创作）
• 如果是，您会怎么做？ （我曾考虑过使用currying，但我不知道如何实现它，尤其是如果HOC()必须采用任意数量的组件时）

你们也可以给我任何“好的练习技巧”！

Answer 1

props是HOC可以直接从组件道具接收的东西

const HOC = (componentList) =>

    class extends React.Component {
      render() {
        return(
          <View>
            {componentList.map( (Component, index) => {
              return <Component {...this.props[index]} />
            })}
          </View>
        )
      }

}
class App extends React.Component {
  render (){
    //this call is what makes me uncomfortable
    const DoubleComponent = HOC([MyComponent, MyComponent]); 
    return(
      <DoubleComponent names={[{name: 'first'}, {name: 'second'}]}/>
    )
  }
}