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

Question

我是React-Native的新手（并且是为此目的），并且我刚刚开始使用高阶组件。我知道这些应该将一个组件作为参数返回一个其他组件。

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

现在，问题（以及我发布此信息的原因）是，它使我感觉自己的代码有些笨拙，因为我必须通过道具。我最终要做的是一个功能，该函数需要两个阵列，第一个组件和第二个道具，必须按照相同的顺序给出。（因此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 />
    )
  }
}

我设法构建了这样的东西，它适用于我想要的工作，但是这个问题更多地是关于：

• 是一件坏事吗？
• 如果是的，您会做什么？（我考虑过咖喱，但我不知道如何实现它，尤其是如果HOC()必须采用任意数量的组件）

我也追求任何"好练习提示"，你们可以给我！

Answer 1

props是HOC可以直接从组件prop收到的东西

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'}]}/>
    )
  }
}