react + ts 类型检测问题？求解答。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1932 天前的主题，其中的信息可能已经有所发展或是发生改变。

基础代码

import React from 'react'; interface Prop { children: React.ReactNode } class Person extends React.Component<Prop, {}> { constructor(props: Prop) { super(props); this.state = {}; } render() { return ( <div> // 这个地方报错 { this.props.children({ x: 30, y: 40 }) } </div> ); } }

报错内容

(property) React.Component<Prop, {}, any>.props: Readonly<Prop> & Readonly<{ children?: React.ReactNode; }> 不能调用可能是 "null" 或“未定义”的对象。ts(2723)

(property) children: React.ReactNode 不能调用可能是 "null" 或“未定义”的对象。ts(2723) 此表达式不可调用。 不可调用 "string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal" 类型的任何组成部分。ts(2349)

另一种写法,不报错

import React from 'react'; interface Prop { children: React.ReactNode } class Person extends React.Component<Prop, {}> { constructor(props: Prop) { super(props); this.state = {}; } render() { const props: any = this.props; return ( <div> // 这样不会报错 { props.children({ x: 30, y: 40 }) } </div> ); } }

问题

为什么报错，我不是已经给他做了类型声明了吗
怎么解决
react + ts 有没有什么好的文档推荐

** 勿喷我，觉得问题简单，不愿意回复的请退出去 **

15 条回复 2020-07-05 01:14:55 +08:00

BigOldBrother

2020-07-04 17:51:42 +08:00 via Android

我理解的你只是给 constructor 函数的 props 参数定义了类型，下边的 this.props 是实例上的了，不是一个东西

loveyou1

2020-07-04 18:05:11 +08:00

@BigOldBrother

import React from 'react';

interface Prop {
children: React.ReactNode
}

class Person extends React.Component<Prop, {}> {
constructor(props: Prop) {
super(props);
this.state = {};
}

render() {
// 这里这样
const props: Prop = this.props;
return (
<div>
{ props.children({ x: 30, y: 40 }) }
</div>
);
}
}

这种情况也报错