[학습노트] TypeScript+React 시수 - 구덩이 밟기 기록

2310 단어
  • 인터페이스명명
  • 프로그램 오류: 인터페이스 name must start with a capitalized I 인터페이스의 이름은 대문자 I로 시작해야 합니다.
  • 그룹 내 가져오기 소스
  • 프로그램 오류: Import sources within a group must be alphabetized 그룹의 가져오기 소스는 알파벳순으로 가져와야 합니다.오류 예:
    import Home from "./Home"
    import About from "./About"
    

    올바른 쓰기:
    import About from "./About"
    import Home from "./Home"
    
  • 클래스 방법render의 권한
  • 프로그램 오류: The class method'render'must be marked either'private','public', or'protected'클래스 방법인'render'는'private','public'또는'protected'로 표시해야 합니다.이 오류가 발생한 상황을 말해 보세요. 저는 index에 있습니다.ES6 class 정의 서브어셈블리를 tsx에 도입합니다.하위 구성 요소의render () 함수 앞에private,public,protected 프로그램이 없으면 오류가 발생합니다.그러나 이 경우,public 접두사를 사용할 때만 코드가 정상적으로 실행되고, 다른 두 개의 접두사 프로그램을 사용해도 오류 (다른 오류) 가 실행되지 않습니다. 이 상황은 아직 탐구되지 않았습니다.
  • 어셈블리 전송 Props
  • 구성 요소 전달 Props와javascript는 달리 매개 변수의 형식으로 전송 Props 구성 요소를 표시해야만 얻을 수 있습니다.클래스 구성 요소의 예는 다음과 같습니다.
    // ./src/components/Person.tsx
    interface IProps {
      name: string;
      age: number
    }
    
    class Person extends React.Component{
      constructor(props: IProps) {
        super(props)
      }
    }
    
    public render() {
      return (
        

    :{ this.props.name }

    :{ this.props.age }

    ) } // ./src/index.tsx ReactDOM.render(
    , document.getElementById("root") as HTMLElement )

    여기에 함수식 구성 요소의 예를 하나 더 들다.
    // Person.tsx
    //           
    interface IProps {
      name: string;
      age: number;
    }
    
    function Person( { name, age }: IProps ) {
      return (
        

    :{ name }

    :{ age }

    ) }
  • 구성 요소의 State
  • 구성 요소의 State는 Props와 유사하며 State 인터페이스를 정의하여 State를 설정해야 합니다.여기에도 하나의 예를 들 수 있다.
    interface IState {
      currentTime: Date;
    }
    
    interface IProps {
      country: string;
    }
    
    class Zone extends React.Component {
      constructor(props: IProps) {
        super(props);
        this.state = {
          curTime: new Date
        }
      }
    
      public render() {
        return (
          
    :{ this.props.country }, :{ this.state.curTime.toString() }
    ) } }

    좋은 웹페이지 즐겨찾기