如果在react函数组件中不返回JSX,如何形成一个类型脚本规则/配置

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> 
}

即使没有这些注释,typescript仍然会有帮助,如果您尝试使用错误的 Hello

另一种选择是将tslint与 no-unused-expression

未使用的表达式是表达式语句,它们不是赋值或函数调用(因此通常没有操作)。

import React from 'react';

const Hello = function Hello(props: {name: string}) {
  <div>Hello  {props.name}</div>
}

export default Hello;

Error in 0.8.16/lib/invariant.js (42:15)
Hello(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.