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>
);
}
}
** 勿喷我,觉得问题简单,不愿意回复的请退出去 **
1
BigOldBrother 2020-07-04 17:51:42 +08:00 via Android
我理解的你只是给 constructor 函数的 props 参数定义了类型,下边的 this.props 是实例上的了,不是一个东西
|
2
loveyou1 OP @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> ); } } 这种情况也报错 |
3
withzhaoyu 2020-07-04 18:10:47 +08:00
children 断言是 reactNode, 其实是个方法?我看你有传参 {x:30,y:40}
|
4
toma77 2020-07-04 18:11:49 +08:00 via iPhone
children 换个名字试试?
|
5
loveyou1 OP @withzhaoyu
我就想试一试 react + ts,谁知道一试就出问题 因为这个组件是这么写的 <Person> {(mouse: any) => ( <p>鼠标的位置是 {mouse.x},{mouse.y}</p> ) </Person> |
7
sun876592293 2020-07-04 18:20:54 +08:00
this 调用的是类成员,你得看看子类和父类有没有这个成员,不是声明了 传个形参就行的
|
8
Raincal 2020-07-04 18:48:24 +08:00
```js
children: (mouse: { x: number; y: number }) => React.ReactNode ``` |
9
noe132 2020-07-04 18:51:48 +08:00
如果是 React.ReactNode 请直接{this.props.children}
如果你要传个 render function 进来,请把 children 的类型改了。 另外不推荐这样做,建议用 render props. |
10
dremy 2020-07-04 18:58:39 +08:00 via iPhone
这不就是 children 版的 render props,那得把 children 定义成对应的函数类型
另外现在的 Hooks 解决这类问题更加合适和方便,建议通过自定义 Hooks 而不是通过类组件的 render props 来实现 |
11
loveyou1 OP |
13
Raincal 2020-07-04 19:21:05 +08:00
@loveyou1 #11 报错的原因上面已经有人说了,你的另一种写法不报错是因为在 render 里把 props 定义为 any 了
|
14
weixiangzhe 2020-07-05 00:13:11 +08:00 via Android
看这个库: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet
children 你定义的是一个 renderprops 写法 对应的是 function 才对,上面的 md 里写的情景很全了,建议看一遍 |
15
ke1vin 2020-07-05 01:14:55 +08:00
这不是很明显吗,children 应该是 Function
|