React's Higher-order Components documentation needs an example of a component that consumes properties
- 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
Bewertung
Dieses Issue wurde noch nicht bewertet.