英文:
Why this is giving me error in the typescript?
问题
Here is the translated code portion:
我从网页上复制了一个组件。
它是这样的：
export default class ShowMore extends React.PureComponent {
constructor(props) { //这里有错误
super(props);
this.wrapper = React.createRef(); //这里有错误
this.state = {
expand: false,
expandable: true,
height: '0px',
mounted: false,
};
this._handleResize = () => this.handleResize; //这里有错误
}
}
正如你所看到的，这不是 TypeScript 代码。
所以我尝试将它转换成 TypeScript，但仍然出现错误。
我对类组件有一些经验，但我没有经验使用 `typescript && class component`，所以我现在感到困惑。
从我的理解来看，只要我给 `props` 添加了 `type` 或 `interface`，错误应该消失，但实际上并没有，下面是更新后的代码。
interface SeeMoreProps {
wrapper: any;
handleResize: any;
}
export default class ShowMore extends React.PureComponent {
constructor(props: SeeMoreProps) { //这个错误消失了
super(props);
this.wrapper = React.createRef(); //错误（类型“ShowMore”上不存在属性“wrapper”）
this.state = {
expand: false,
expandable: true,
height: '0px',
mounted: false,
};
this._handleResize = () => this.handleResize; //属性“_handleResize”在类型“ShowMore”上不存在。你是否要使用“handleResize”？
}
}
I've translated the code portion you provided.
英文:
I copy a component from a webpage.
It was something like this
export default class ShowMore extends React.PureComponent {
constructor(props) { //ERROR HERE
super(props);
this.wrapper = React.createRef(); //ERROR HERE
this.state = {
expand: false,
expandable: true,
height: '0px',
mounted: false,
};
this._handleResize = () => this.handleResize; //ERROR HERE
}
as you can see this is not a typescript code.
So I try to convert it to typescript but it still giving me error.
I have some experience with class component but i don't have experience with typescript && class component so i am confused right now.
From my understanding as long as i give the type or interface to the props, The error should goes away but it does not, here is the updated code.
interface SeeMoreProps {
wrapper: any;
handleResize: any;
}
export default class ShowMore extends React.PureComponent {
constructor(props: SeeMoreProps) { //This error goes away
super(props);
this.wrapper = React.createRef(); // Error(Property 'wrapper' does not exist on type 'ShowMore')
this.state = {
expand: false,
expandable: true,
height: '0px',
mounted: false,
};
this._handleResize = () => this.handleResize; //Property '_handleResize' does not exist on type 'ShowMore'. Did you mean 'handleResize'?
}
Can someone help explain why my interface not working in this case?
答案1
得分: 2
this.wrapper 应该在类组件的作用域内。
这是更新后的代码：
interface SeeMoreProps {
wrapper: any;
handleResize: any;
}
export default class ShowMore extends React.PureComponent {
// 这是类组件的作用域
wrapper: unknown;
_handleResize: unknown;
constructor(props: SeeMoreProps) {
super(props);
this.wrapper = React.createRef();
this.state = {
expand: false,
expandable: true,
height: '0px',
mounted: false,
};
this._handleResize = () => props.handleResize; // 你需要从 props.handleResize 传递 handleResize
}
}
英文:
this.wrapper should be in the scope of the class component.
Here the updated code:
interface SeeMoreProps {
wrapper: any;
handleResize: any;
}
export default class ShowMore extends React.PureComponent {
//This is the scope of the class component
wrapper: unknown;
_handleResize: unknown;
constructor(props: SeeMoreProps) {
super(props);
this.wrapper = React.createRef();
this.state = {
expand: false,
expandable: true,
height: '0px',
mounted: false,
};
this._handleResize = () => props.handleResize; //you need to pass
handleResize from props.handleResize;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论