reactjs - onSelect ღონისძიების დამჭერის ტიპი TypeScript-თან React Bootstrap DropDown-ისთვის


მე ვიყენებ React-ს TypeScript-თან და react-bootstrap-ს dropdown სიების შესაქმნელად:

ipc__handleSelect = (eventKey: any, event: any) => {
}

render() {

    return (
        <Dropdown>
            <Dropdown.Toggle>Text</Dropdown.Toggle>
            <Dropdown.Menu>
                <Dropdown.Item
                    key         = 'key1'
                    eventKey    = 'key1'
                    onSelect    = {this.ipc__handleSelect}
                >Item</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
}

დახმარება მონაცემთა ტიპის ახსნაში

  1. event: any - რა ტიპი უნდა დავწერო?

  2. eventKey: any - რა ტიპი უნდა დავწერო?

როდესაც ვწერ eventKey: string (რადგან გასაღები არის სტრინგი), მე ვიღებ შეცდომას:

ტიპი '(eventKey: string, event: any) => void' არ არის თავსებადი ტიპთან 'SelectCallback'. პარამეტრების 'eventKey' და 'eventKey' ტიპები შეუთავსებელია. ტიპი 'string | null' არ არის თავსებადი ტიპთან 'string'. ტიპი 'null' არ არის თავსებადი ტიპთან 'string'.

რატომ ხდება იქ საერთოდ null?

პასუხი #1

თუ დააკვირდებით react-bootstrap ბიბლიოთეკის კოდს, ნახავთ, რომ Dropdown.Item-ს აქვს onSelect ტიპის SelectCallback და SelectCallback ასე გამოიყურება:

export type SelectCallback = (
  eventKey: string | null,
  e: React.SyntheticEvent<unknown>,
) => void;

შეიძლება იმიტომ, რომ თქვენ მიუთითეთ, რომ თქვენი ჰენდლერი იღებს მხოლოდ სტრინგ ტიპს, ხოლო Dropdown Item-ის onSelect უთმობს string|null-ის eventKey-ზე, თქვენ მიიღეთ შეცდომა, რომ ის ვერ მოექცევა მატრიცაში.