TypeScript에서 반응 상태 사용

TypeScript에서 반응 상태 사용

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] Property 'playOrPause' does not exist on type 'ReadOnly<{}>'.

playOrPause 속성을 문자열의 일종이라고 선언하려고 했지만 작동하지 않았습니다.

내가 뭘 놓쳤지?

구성 요소가 Typescript의 Generics에서 사용하는 상태 인터페이스를 사용하고 있음을 선언해야 합니다.

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

(클래스가 아닌) 후크가 있는 기능 컴포넌트에 어떻게 실장해야 하는지 궁금해 하는 경우:

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

useState는 일반적인 함수입니다.즉, 타입 파라미터를 받아들일 수 있습니다.이 type-parameter는 TypeScript에 이 상태에 어떤 타입이 허용되는지 알려줍니다.

내 경우(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>
    )
  }
}

언급URL : https://stackoverflow.com/questions/46987816/using-state-in-react-with-typescript