Question

我看了几篇关于如何在hoc中使用流量的文章，但是如果我不想通过所有道具，就不会做什么。

/* @flow */
import * as React from 'react';

type TComponent = {
  pass: string,
  inject: string
}
const TestComponent = ({pass, inject}: TComponent) => <span>{pass}{inject}</span>

type THocDiff = {
  take: string
}

const Hoc = (Component) => class Hoc extends React.Component {

  render(){
    const {take, ...props} = this.props
    return(
        <Component {...props} inject="inject"/>
    )
  }
}

const WrappedComponent = Hoc(TestComponent)

const Using = () => (<WrappedComponent pass='pass' take='take'/>)

try

我只想在HOC中描述diff道具：也不要在包裹的组件中描述HOC’s道具，也不要在hoc中描述包裹的组件props。

Answer 1

您需要使用：Generics，$Diff和Hoc definition：

import * as React from 'react';

type TComponent = {
  pass: string,
  inject: string
}
const TestComponent = ({pass, inject}: TComponent) => <span>{pass}{inject}</span>

type THocDiff = {
  take: string
}

type TInjectInHoc = {
  inject: string
};

const Hoc = <T: {}>(Component: React.AbstractComponent<T>): React.AbstractComponent<$Diff<T, TInjectInHoc> & THocDiff> => {
  return class extends React.Component<T & THocDiff> {

  render(){
    const { take, ...props} = this.props;
    return(
        <Component {...props} inject="inject" />
    )
  }
 }
}
const WrappedComponent = Hoc<TComponent>(TestComponent)

const using = () => (<WrappedComponent pass="123" take='take' />)

Try

如何在反应HOC中描述除流道具

1 个答案: