-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support Stateless Functional React components #1081
Comments
I dug into this as far as I could, and here is what I could find:
So this leads me to
So Flow is aware that
|
Not a solution, but just to explain the way things are right now: the current React definitions were designed with React 0.13 in mind. I don't have all the inside scoop here, but personally I am hoping that we roll the 0.14 type definitions into React itself, to avoid the versioning nightmare that comes from vendoring React's interfaces directly into Flow. |
Any update on this? Is it possible to annotate function based components now? |
I ended up doing this for now: /* @flow */
import React from 'react';
...
export default (props: {
notes: Array<Object>,
onValueClick: Function,
onEdit: Function,
onDelete: Function
}): ReactElement => {
const {notes, onValueClick, onEdit, onDelete} = props;
return (
...
);
} Does the approach look good to you? Any gotchas apart from destructuring? |
I can't verify because I was forced to simply abandon Flow, but the core problem was that with 0.13 components typing If I understand your attempt correctly I think it will have the same problem. Flow won't catch missing or wrong parameters in |
@AsaAyers Alright. Thanks for getting back to me. There's actually an extra problem I forgot to mention. It should be possible to set some sane default values for the parameters. For example that Maybe it makes sense to use |
No updates in here for a month, so is it now possible to annotate stateless functional components? This here does not produce any flow error: |
Nope. Still not possible. No React or Flow releases have happened in the past month either, but it will likely be a release or two before a solution is reached. Disclaimer: I’m not on either team in any capacity. |
It seems this solve the problem: Only today discovered that Flow actually supports type-checking of props passed to React components, but you have to add a line like ./node_modules/react(-dom)?/. to your .flowconfig [ignore] to make it work, because otherwise the React library (without type definitions) overrides Flow's built-in React definitions. I'm really surprised there's such a useful feature hidden by an issue like this. [https://github.com//issues/676] |
@bebraw your approach now works, flow throws an error. is there any way I can set a default value here? this obv doesn't work..
By the way, I came here from your book, It's excellent! |
@Nor145 your syntax is a little wrong here. Default values shouldn't be part of the type definition! :) const Header = (props: {
isAdmin: boolean,
dispatch: Function
} = {isAdmin: false}) => (
<Toolbar style={style.bar}>
... Would provide a default for the const Header = ({isAdmin = false, ...props}: {
isAdmin: boolean ,
dispatch: Function
}) => (
<Toolbar style={style.bar}>
... |
That's assuming flow handles the left side being an object anyway! |
@chrisui Thanks for answering. Your second approach is right, but seems there is not support for this feature yet. |
On a side note, it looks like the new comment style syntax doesn't work with stateless components. |
Is there an available workaround to enable flow checks on Stateless Function components from JSX until proper support is added ? |
Just wanted to say that flow has constantly faced issues with new syntax, which has never enabled me or most of the teams I know to have proper type coverage. This issue in particular and the lack of core team communication and "openness" made me take the decision of dropping flow from all projects I have some control over today. |
I wonder if @marudor has a suggested answer to your question @gcazaciuc ? I could really use this too. |
@glortho sorry, can't help with that. |
Umm wow! |
This can be closed |
Not sure about leaving this open or creating a new issue but I think this is not quite finished, for example, the documentation on react still says "Support for stateless functional components is coming soon". After reading the documentation on the other ways of building react components, I thought flow could read the
that it would type check, but flow fails with:
|
I'm not using propTypes I'm using flow type annotations with stateless So maybe it's a new issue? On 30 May 2016 at 16:19, Christoph Neuroth notifications@github.com wrote:
|
Hm, I'm a bit confused about the feature then: When not using |
It's a little different as you don't explicitly call the function, it gets But it wasn't working before and is now as of 0.26 On 30 May 2016 at 16:26, Christoph Neuroth notifications@github.com wrote:
|
The docs are outdated. I am going to update them soon to reflect our support for stateless functional components. Regarding PropTypes, Flow understands PropTypes for components created using |
@samwgoldman thanks for the explanation and your work 💖 |
@samwgoldman awesome, thanks. there is one more thing I can't figure out right now: how can we handle the implicit
|
Having the same issue as this ☝️ - would love a solution! |
Should this issue be reopened for the |
For future spelunkers, here's the docs for typing functional components. |
Updated link, for reference: https://flow.org/en/docs/react/components/#toc-stateless-functional-components |
Here is an ES6 class component:
This works as expected, but how do you annotate a stateless functional component? This is the best I could do, but it doesn't produce an error and it should.
edit: Renamed the examples so the names don't conflict.
The text was updated successfully, but these errors were encountered: