[英]Using state in react with TypeScript
I am new to TypeScript.我是 TypeScript 的新手。 I've got a problem with displaying this.state.something inside the render method or assigning it to a variable inside a function.
我在渲染方法中显示 this.state.something 或将其分配给函数中的变量时遇到问题。
Have a look at the most important piece of code:看看最重要的一段代码:
interface State {
playOrPause?: string;
}
class Player extends React.Component {
constructor() {
super();
this.state = {
playOrPause: 'Play'
};
}
render() {
return(
<div>
<button
ref={playPause => this.playPause = playPause}
title={this.state.playOrPause} // in this line I get an error
>
Play
</button>
</div>
);
}
}
The errors says: "[ts] Property 'playOrPause' does not exist on type 'ReadOnly<{}>'.错误说:“[ts] 属性 'playOrPause' 在类型 'ReadOnly<{}>' 上不存在。
I tried to declare the playOrPause property to be a type of string and it didn't work.我试图将 playOrPause 属性声明为一种字符串,但它不起作用。 What am I missing here to make it work?
我在这里缺少什么才能使它工作?
You need to declare that your component is using the State interface, it used by Typescript's Generics.您需要声明您的组件正在使用 State 接口,它由 Typescript 的泛型使用。
interface IProps {
}
interface IState {
playOrPause?: string;
}
class Player extends React.Component<IProps, IState> {
// ------------------------------------------^
constructor(props: IProps) {
super(props);
this.state = {
playOrPause: 'Play'
};
}
render() {
return(
<div>
<button
ref={playPause => this.playPause = playPause}
title={this.state.playOrPause} // in this line I get an error
>
Play
</button>
</div>
);
}
}
In case anyone is wondering how to implement it with hooks :如果有人想知道如何使用钩子实现它:
const [value, setValue] = useState<number>(0);
useState is a generic function, that means that it can accept a type parameter. useState 是一个泛型函数,这意味着它可以接受一个类型参数。 This type-parameter will tell TypeScript which types are acceptable for this state.
这个类型参数将告诉 TypeScript 哪些类型可以接受这种状态。
In my case ( working with TypeScript, and the state value was actually a boolean ) I've had the same problem, I've fixed it by passing the state value I wanted to mark as output to String():在我的情况下(使用 TypeScript,状态值实际上是一个布尔值)我遇到了同样的问题,我通过将我想标记为输出的状态值传递给 String() 来修复它:
import React, { Component } from 'react';
interface ITestProps {
name: string;
}
interface ITestState {
toggle: boolean;
}
class Test extends Component<ITestProps, ITestState> {
constructor(props: ITestProps) {
super(props);
this.state = {
toggle: false,
};
this.onClick = this.onClick.bind(this);
}
onClick() {
this.setState((previousState, props) => ({
toggle: !previousState.toggle,
}));
}
render() {
return (
<div>
Hello, {this.props.name}!
<br />
Toggle state is: {String(this.state.toggle)}
</div>
)
}
}
Just declare interface or type with property, types, and annotate it to state.只需使用属性、类型声明接口或类型,并将其注释为状态。 the
?
?
mean optional:意思是可选的:
interface ITestProps {}
interface ITestState {
playOrPause?: string;
}
class Player extends React.Component<ITestProps, ITestState> {
state = {
playOrPause: 'Play'
};
render() {
return // your code here
}
You can add more value as per your need to interface above if then you need the same state to pass it to child component you just need to create a file with .d.ts
and you should be good to go!您可以根据需要为上面的接口添加更多值,如果您需要相同的状态将其传递给子组件,您只需要创建一个带有
.d.ts
的文件就可以了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.