在与 TypeScript 的反应中使用状态

Posted 2023-02-21

【中文标题】在与 TypeScript 的反应中使用状态

【英文标题】：Using state in react with TypeScript

【发布时间】：2018-04-09 19:31:09

【问题描述】：

我是 TypeScript 的新手。我在渲染方法中显示 this.state.something 或将其分配给函数中的变量时遇到问题。

看看最重要的一段代码：

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

错误提示：“[ts] 属性 'playOrPause' 在类型 'ReadOnly' 上不存在。

我试图将 playOrPause 属性声明为一种字符串类型，但它不起作用。 我在这里缺少什么使它起作用？

【问题讨论】：

'ValueChanging' does not exist on type 'Readonly<>'的可能重复

【参考方案1】：

您需要声明您的组件正在使用 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>
    );
  

【讨论】：

谢谢。现在可以了。我试图仅声明 IState 接口并声明类 Player 仅使用 IState（它仍然无法正常工作）但是当我将名为 IProps 的空接口与 IState 一起声明时，它可以正常工作。这是为什么呢？

Generic位置有一个含义，第一个位置应该表示props类型，第二个是状态。

如果在构造函数 state = playOrPause: 'Play' 之外声明状态，打字稿不会针对 IState 验证它。为什么会这样？

如何在构造函数之外？

@RahulYadav 如果你这样做，你可以这样做 state: IState = ... 并将其从通用道具中删除。它会被推断出来。

【参考方案2】：

如果有人想知道如何在带有钩子的功能组件中实现它（而不是在类中）：

const [value, setValue] = useState<number>(0);

useState 是一个泛型函数，这意味着它可以接受类型参数。这个类型参数会告诉 TypeScript 哪些类型可以被这个状态接受。

【讨论】：

这仅对 react 中的函数有效，对类无效。我已经吸取了这个痛苦的教训。

Hooks 只能在功能组件中使用

根据问题不适用于基于类的组件。

正如我在回答中所说，如果有人想知道......

【参考方案3】：

在我的情况下（使用 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>
    )
  

【参考方案4】：

只需用属性、类型声明接口或类型，并将其注释为状态。 ? 表示可选：

interface ITestProps 

interface ITestState 
  playOrPause?: string;


class Player extends React.Component<ITestProps, ITestState> 

  state = 
     playOrPause: 'Play'
  ;
  

  render() 
    return // your code here

如果您需要相同的状态将其传递给子组件，您可以根据需要添加更多值，您只需要使用.d.ts 创建一个文件，您应该一切顺利！

【讨论】：

这是错误的。你的代码和他的代码一样。正确方式：class Test extends Component<ITestProps, ITestState>

有什么区别？两个 sn-ps 都指 React.Component 类