facebook / facebook/flow

React's Higher-order Components documentation needs an example of a component that consumes properties

Offen
#4,759 9 Kommentare 7 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
Rust
Sterne
22.3k
Forks
1.9k
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

I read the documentation in https://flow.org/en/docs/react/hoc/ but I have a hard time figuring out how to type higher order components that need specific props, as opposed to the ones that inject props like the documentation says.

Here is my (non working) code, modified from the documentation:

```javascript
import * as React from 'react';

type NeededProps = {
bar: number
};

function consumeProp(
Component: React.ComponentType
): React.ComponentType {
return function WrapperComponent(props: NeededProps & Props) {
if (props.bar < 100) {
return ;
}
return null;
};
}

class MyComponent extends React.Component<{
a: number,
b: number,
}> {}

const MyEnhancedComponent = consumeProp(MyComponent);

;
```

But I still get errors:
```
13: return ;
^ props of React element `Component`. This type is incompatible with
8: function consumeProp(
^ some incompatible instantiation of `Props`
13: return ;
^ props of React element `Component`. This type is incompatible with the expected param type of
8: function consumeProp(
^ some incompatible instantiation of `Props`
```

See [the live try](https://flow.org/try/#0JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQDMAnmFnAHJZYAmPACsTDoAvHADedOHABGyKAC44AOwCuIaVih0AvvToEVS-MAhK4uU6jVYBEMAB5bQxWO0A+ABSS4AYRKQlLCUYRWw8GAA6P3BTIJgAFRYsR0FUNzoASlCqSOiAuMTWe04eflS4ADI4JzTxb0oYFSgzAyMYEzMAdShkMFYoPNjgjzBUxRLebhrK6tSMuqkASGACOBHUiNkoOHs4AEYABgP5iUWpKQams3tBwODxCMfRu1RtOAB6N3pFt7pFy+ayhUABtgfQpLodAxcMC0OgALJMW5xOBYAAeMCC3HQYXwUX8Qxg9gkUmQilU6k0ABpvNJyWoNFAae5xNpoZZ4IiAKJKAAWyCMPGR91EFiUVhANkEHkRwpgGT09m5fIFuCFBLu8GQwjEeze0h1ACZ9XIdQAWY0fL5AA).

I tried using utilities like `$Diff`, or `{ ...$Exact, ... SomethingElse }` but I couldn't make it work.

Some guidance would be helpful, including maybe some more documentation :)

(Note: my ultimate goal is to type a HOC that both consumes and injects properties).

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.