reactjs - React + Typescript: Kiểu của component React không có state/không có props

Tôi đã thấy nhiều ví dụ về các thành phần React sử dụng Typescript:

class Foo extends React.Component<IProps, IState> {}

Dường như không có quy ước rõ ràng khi chúng ta không sử dụng cả Props lẫn State.

Mọi người đặt các kiểu này là any, null, undefined, {}, void, v.v. Đây là những gì tôi đã thấy cho đến nay:

1. class Foo extends React.Component<null, null> {}

2. class Foo extends React.Component<any, any> {}

3. class Foo extends React.Component<{}, {}> {}

4. class Foo extends React.Component<undefined, undefined> {}

5. class Foo mở rộng React.Component<void, void> {}

6. class Foo extends React.Component<object, object> {}

Cách tốt nhất để làm việc đó là gì?

Cập nhật:

• Đạo cụ:

  • void không thể được sử dụng (https://github.com/Microsoft/TypeScript/issues/15409 và https://github.com/Microsoft/TypeScript/issues/15419) vì đối tượng props được khởi tạo là {}

GIẢI PHÁP

Chỉ cần làm - class Foo extends React.Component {} vì prop và state được khởi tạo thành {}

Câu trả lời #1

Như đã trả lời cho câu hỏi này, bạn có thể sử dụng lớp React.FC<{}>

const MyStatelessComponent : React.FC<{}> = props =>
    <div>{props.children}</div>

Hoặc nếu đánh dấu của bạn lớn hơn:

const MyStatelessComponent : React.FC<{}> = props => {

    {/*  Some code here */}
    return <div>{props.children}</div>

}

Câu trả lời #2

Từ https://github.com/DefinitelyTyped/DefinitelyTyped/blob/15b7bac31972fbc081028937dfb1487507ca5fc9/types/react/index.d.ts#L199-L200

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

Props và state được khởi tạo thành {}, vì vậy đối với một component không có state cũng như prop thì chúng ta có thể đơn giản làm như sau:

class Foo extends React.Component {} 

Câu trả lời số 3

Theo hướng dẫn này và kinh nghiệm của tôi, tôi sẽ nói:

1. class Foo extends React.Component<null, null> {} khi bạn biết mình sẽ không nhận props hay state
2. `class Foo extends React.Component<any, any> {}` khi bạn biết rằng bạn sẽ nhận được props và state nhưng thực sự bạn không quan tâm chúng trông như thế nào
3. class Foo extends React.Component<{}, {}> {} chưa từng thấy, có vẻ lạ
4. class Foo extends React.Component<undefined, undefined> {} giống như null, tùy bạn. Tôi thấy null thường gặp hơn undefined
5. class Foo extends React.Component<void, void> {} là ý tưởng tồi, vì dường như được dành riêng cho giá trị trả về của hàm (khi bạn không mong đợi có giá trị trả về)

Những ý kiến khác đều được hoan nghênh