저는 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 파일에서 발생했으며 공급자 문제이며 다른 곳에서 문제가 발생합니다.
React.Props
더 이상 사용되지 않습니다!