Typecript + React / Redux: Thuộc tính “XXX” không tồn tại trên loại 'IntriualityAttributes & IntrinsicClassAttributes

Question 1

Tôi đang làm việc trên một dự án với Typescript, React và Redux (tất cả đều chạy trong Electron) và tôi đã gặp sự cố khi đưa một thành phần dựa trên lớp vào một thành phần khác và cố gắng chuyển các tham số giữa chúng. Nói một cách dễ hiểu, tôi có cấu trúc sau cho thành phần vùng chứa:

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

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

Và thành phần con:

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

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

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

Rõ ràng là tôi chỉ bao gồm những điều cơ bản và còn nhiều điều khác nữa cho cả hai lớp này nhưng tôi vẫn gặp lỗi khi tôi thử và chạy những gì trông giống như mã hợp lệ đối với tôi. Lỗi chính xác mà tôi đang gặp phải:

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

Khi lần đầu tiên tôi gặp lỗi, tôi nghĩ đó là do tôi không chuyển giao diện xác định đạo cụ của mình, nhưng tôi đã tạo ra điều đó (như bạn có thể thấy ở trên) và nó vẫn không hoạt động. Tôi tự hỏi, có điều gì đó tôi đang thiếu?

Khi tôi loại trừ phần hỗ trợ ChildComponent khỏi mã trong ContainerComponent, nó hiển thị rất tốt (ngoài việc ChildComponent của tôi không có phần hỗ trợ quan trọng) nhưng với nó trong JSX Typescript từ chối biên dịch nó. Tôi nghĩ rằng nó có thể liên quan đến gói kết nối dựa trên bài viết này , nhưng sự cố trong bài viết đó đã xảy ra trong tệp index.tsx và là sự cố với nhà cung cấp và tôi đang gặp sự cố ở nơi khác.

Question 2

Vì vậy, sau khi đọc qua một số câu trả lời có liên quan (cụ thể là câu này và câu này và xem câu trả lời của @ basarat cho câu hỏi, tôi đã tìm được thứ gì đó phù hợp với mình. Có vẻ (đối với mắt React tương đối mới của tôi) như Connect đã không cung cấp giao diện rõ ràng với thành phần vùng chứa, vì vậy nó đã bị bối rối bởi phần mềm hỗ trợ mà nó đang cố gắng vượt qua.

Vì vậy, thành phần vùng chứa vẫn giữ nguyên, nhưng thành phần con thay đổi một chút:

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

Ở trên quản lý để làm việc cho tôi. Chuyển một cách rõ ràng các đạo cụ mà thành phần đang mong đợi từ vùng chứa dường như hoạt động và cả hai thành phần được hiển thị đúng cách.

LƯU Ý: Tôi biết đây là một câu trả lời rất đơn giản và tôi không chắc chắn chính xác TẠI SAO điều này hoạt động, vì vậy nếu một ninja React có kinh nghiệm hơn muốn rút ra một số kiến thức về câu trả lời này, tôi rất sẵn lòng sửa đổi nó.

Question 3

Thay vì export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);, hãy thích trình connecttrang trí https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/app/fileTree.tsx#L136-L146

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

Nơi kết nối được xác định tại đây https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

Tại sao?

Có vẻ như các định nghĩa bạn đang sử dụng có thể đã lỗi thời hoặc không hợp lệ (có thể là tác giả kém).