React无状态组件无法在打字稿中编译

时间:2018-12-16 11:09:23

标签: reactjs typescript react-tsx

我已经使用React JS&Flow进行了很多工作,现在,最近切换到打字稿。我不确定为什么打字稿会抱怨无状态组件定义。

来源

interface Test2Prop {
  names : string[];
}

const TestComponent: SFC<TestProp> = (props: TestProp) => {
    return (
        props.name.map((val, idx) => <h3 key={idx}>{`APPENDING-${val}`}</h3>)
    );
}

错误

[ts]
Type '(props: TestProp) => Element[]' is not assignable to type 'FunctionComponent<TestProp>'.
  Type 'Element[]' is not assignable to type 'ReactElement<any>'.
    Property 'type' is missing in type 'Element[]'. [2322]

我不确定为什么使用React.Fragment可以使错误消失。

interface Test2Prop {
  names : string[];
}

const Tests : React.SFC<Test2Prop> = (props : Test2Prop) => {
  return (
    <React.Fragment>
    { props.names.map(name => <h1>{name}</h1>) }
    </React.Fragment>
  ); 
}

我不想使用React.Fragment,因为根据我的理解,这不是解决方案,而是黑客。

Stackblitz here

0 个答案:

没有答案