用例

Question

让我们说如果我们有以下HOC：

const myHoc = someProps => ComposedComponent => {
  const propsToPass = { /* ...some calculations... */ }; 
  return <ComposedComponent {...propsToPass} />;
};

如何将道具传递给ComposedComponent之外的myHoc中的myHoc？

用例

我正在编写一个与redux-orm一起使用的应用。当然，我想实现用HOC从数据层中抽象视图层（哑组件）的经典思想。由于模型有些统一，我使用工厂模式来创建这些HOC。

工厂职能签名：

bindDocument(Model)(documentId)(ComposedComponent) => DumbComponentWithDocumentProps

在我的应用中，我有一个可以选择＆＃34;这些文件。然后将这些所选文档的documentId存储在redux存储中。我无法使用上述工厂功能编写HOC来将所选文档绑定到哑组件上。

示例所需的功能签名：

bindSelectedMovieTicketDocument(ComposedComponent) => DumbComponentWithDocumentProps

我可以手动检索商店并获取所选的文档ID，但这对我来说闻起来很糟糕。

另一种解决方案是使用HOC将选定的文档ID绑定到包装组件，然后使用id（来自它的道具）来创建具有文档绑定HOC的另一个HOC。这可以工作，但需要很多样板代码才能传递id。

Answer 1

import org.apache.spark.sql.functions._

case class Phone(number: Int, area_code:Int)

case class Person(name: String, age: Int, phonenumbers: Array[Phone])

val converted = input.map {
  case Row(name: String, age: Int, phonenumbers: String) => {
    import scala.util.matching.Regex
    val phoneFormat = raw"\{number:(\d{6}), area_code:(\d{3})\}".r
    val phones = for (m <- phoneFormat.findAllMatchIn(phonenumbers)) yield Phone(m.group(1).toInt, m.group(2).toInt)
    Person(name, age, phones.toArray)
  }
}

这会将var bindHOC = (model) => (DumbComp) => { return connect(state=>state.docID, null)(() => <DumbComp model={model}>); }作为道具从redux商店传递到docID以及DumbComp作为来自输入参数的道具。

这样我们可以避免2个HOC。

将道具传递给高阶组件

用例

1 个答案: