我多次犯错,而忘记了从功能组件返回JSX.也就是说,我执行以下操作:
const Hello = function Hello({name}) {
<div>Hello {name}</div>
}
代替
const Hello = function Hello({name}) {
return <div>Hello {name}</div>
}
我完全知道为什么会出错,但是我经常将不需要此返回值的ES6语法混为一谈.
TypeScript是否可以提供任何帮助,所以在运行它之前我将其视为错误,并得到错误消息,提示可能缺少返回值?
这是一个问题的堆积如山:
https://stackblitz.com/edit/react-ts-badreturn?file=Hello.tsx
解决方法:
有几种选择.最好的方法是使用React.FunctionComponent P注释常量.类型.
import * as React from 'react';
const Hello: React.FunctionComponent<{ name: string }> = function Hello({name}) { // error Type 'void' is not assignable to type 'ReactElement<any>'
<div>Hello {name}</div>
}
另一个选择是只指定函数的返回类型
import * as React from 'react';
const Hello = function Hello({name}) : React.ReactElement<any> { // error Type 'void' is not assignable to type 'ReactElement<any>'
<div>Hello {name}</div>
}
// arrow function
const Hello = ({name}) : React.ReactElement<any> => { // error Type 'void' is not assignable to type 'ReactElement<any>'
<div>Hello {name}</div>
}
注意即使没有任何这些注释,打字稿仍然会有所帮助,如果您尝试在tsx中使用错误版本的Hello,它将报告错误.
编辑
另一种选择是使用tslint并启用no-unused-expression规则.该规则将确保:
Unused expressions are expression statements which are not assignments or function calls (and thus usually no-ops).
当您创建一个jsx元素而不执行任何操作时,将涵盖这种情况.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。