reactjs - Typescript + React/Redux: Thuộc tính "XXX" không tồn tại trên kiểu 'IntrinsicAttributes & IntrinsicClassAttributes'

Tôi đang làm việc trên một dự án với Typescript, React và Redux (tất cả chạy trong Electron), và tôi đã gặp một vấn đề khi tôi bao gồm một component dựa trên class vào một component khác và cố gắng truyền tham số giữa chúng. Nói một cách tổng quát, tôi có cấu trúc sau cho component container:

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 tôi chỉ đang bao gồm những kiến thức cơ bản và còn nhiều điều hơn về cả hai lớp này nhưng tôi vẫn nhận được lỗi khi cố gắng chạy những gì mà tôi thấy giống như mã hợp lệ. Lỗi chính xác mà tôi nhận được:

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

Khi tôi lần đầu gặp lỗi này, tôi nghĩ là do tôi không truyền vào một interface định nghĩa các props của mình, nhưng tôi đã tạo cái đó (như bạn có thể thấy ở trên) và nó vẫn không hoạt động. Tôi đang tự hỏi, có phải tôi đang bỏ sót điều gì không?

Khi tôi loại bỏ prop ChildComponent khỏi mã trong ContainerComponent, nó vẫn render bình thường (ngoại trừ việc ChildComponent của tôi không có một prop quan trọng) nhưng khi có nó trong JSX thì Typescript từ chối biên dịch. Tôi nghĩ có thể nó liên quan đến việc connect bao bọc dựa trên bài viết này, nhưng các vấn đề trong bài viết đó xảy ra trong file index.tsx và là vấn đề với provider, còn tôi lại gặp vấn đề ở nơi khác.

Câu trả lời #1

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

Vì vậy, thành phần container 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);

Những điều trên đã hoạt động với tôi. Việc truyền rõ ràng các props mà component đang mong đợi từ container dường như đã hiệu quả và cả hai component đều được hiển thị đúng.

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 thực sự chắc tại SAO điều này lại hiệu quả, vì vậy nếu một chuyên gia React giàu kinh nghiệm muốn chia sẻ kiến thức về câu trả lời này, tôi sẽ rất vui được chỉnh sửa nó.

Câu trả lời #2

Điều hiệu quả với tôi là đơn giản thay đổi loại Component con từ React.FC sang JSX.Element

Trước (cảnh báo)

const Component: React.FC = () => {

Sau (không có cảnh báo)

const Component = (): JSX.Element => {