[reactjs] Typescript + React / Redux : ‘IntrinsicAttributes 및 IntrinsicClassAttributes 유형에 속성’XXX ‘가 없습니다.

Program / 글쓴이

저는 Typescript, React 및 Redux (모두 Electron에서 실행 중)로 프로젝트를 진행 중이며 하나의 클래스 기반 구성 요소를 다른 구성 요소에 포함하고 이들 사이에 매개 변수를 전달하려고 할 때 문제가 발생했습니다. 느슨하게 말하면 컨테이너 구성 요소에 대해 다음과 같은 구조가 있습니다.

class ContainerComponent extends React.Component<any,any> {
  ..
  render() {
    const { propToPass } = this.props;
    ...
    <ChildComponent propToPass={propToPass} />
    ...
  }
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

그리고 하위 구성 요소 :

interface IChildComponentProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps, any> {
  ...
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

분명히 나는 ​​기본 사항만을 포함하고 있으며이 두 클래스 모두에 훨씬 더 많은 것이 있지만 유효한 코드처럼 보이는 것을 시도하고 실행할 때 여전히 오류가 발생합니다. 내가 받고있는 정확한 오류 :

TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

처음에 오류가 발생했을 때 내 소품을 정의하는 인터페이스를 전달하지 않았기 때문이라고 생각했지만 (위에서 볼 수 있듯이) 여전히 작동하지 않습니다. 궁금합니다. 제가 놓친 것이 있습니까?

ContainerComponent의 코드에서 ChildComponent 소품을 제외하면 잘 렌더링되지만 (중요한 소품이없는 ChildComponent를 제외하고) JSX Typescript에서 컴파일을 거부합니다. 이 기사를 기반으로 한 연결 래핑과 관련이 있다고 생각 하지만 해당 기사의 문제는 index.tsx 파일에서 발생했으며 공급자 문제이며 다른 곳에서 문제가 발생합니다.

답변

그래서 일부 관련 답변 (특히 통해 읽고 이것 과 이것 과 질문에 basarat의 대답 @보고, 나는 나를 위해 작동 뭔가를 찾을 수 있었다. 연결이 공급되지 않은 것)은 상대적으로 새로운 눈을 반응 제에 (보이는 컨테이너 구성 요소에 대한 명시 적 인터페이스이므로 전달하려는 prop에 의해 혼동되었습니다.

따라서 컨테이너 구성 요소는 동일하게 유지되었지만 하위 구성 요소는 약간 변경되었습니다.

interface IChildComponentProps extends React.Props<any> {
  ... (other props needed by component)
}

interface PassedProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps & PassedProps, any> {
  ...
}

....
export default connect<{}, {}, PassedProps>(mapStateToProps, mapDispatchToProps)    (ChildComponent);

위의 내용은 나를 위해 일했습니다. 구성 요소가 컨테이너에서 예상하는 소품을 명시 적으로 전달하면 작동하는 것처럼 보였고 두 구성 요소가 모두 제대로 렌더링되었습니다.

참고 : 이것이 매우 단순한 대답이라는 것을 알고 있으며 이것이 왜 작동하는지 정확히 알 수 없으므로 경험이 많은 React 닌자 가이 대답에 대한 지식을 버리고 싶다면 기꺼이 수정하겠습니다.

답변

대신 데코레이터 https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/app/fileTree.tsx#L136-L146을export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent); 선호합니다.connect

@connect((state: StoreState): Props => {
    return {
        filePaths: state.filePaths,
        filePathsCompleted: state.filePathsCompleted,
        rootDir: state.rootDir,
        activeProjectFilePathTruthTable: state.activeProjectFilePathTruthTable,
        fileTreeShown: state.fileTreeShown,
    };
})

여기에 연결이 정의되어 있습니다 https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

왜?

사용중인 정의가 오래되었거나 유효하지 않은 것 같습니다 (아마도 제대로 작성되지 않았을 수 있음).

답변