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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

基础代码

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

这种情况也报错