Как я могу установить переменную на компонент функции с Typescript

Question

Я пытаюсь вложить MenuItem как переменную в компонент «Выбор» из пользовательского интерфейса материала, чтобы я мог предоставить один компонент для построения выпадающих входов:

import Select from '@material-ui/core/Select'
import MenuItem from '@material-ui/core/MenuItem';

Select.Item = MenuItem

export default Select

При этом выдается следующая ошибка Typescript:

TS2339: Property 'Item' does not exist on type '(props: SelectProps) => Element'.

Возможно ли это сделать с помощью TypeScript? Я не могу думать о том, как изменить определение типа существующего компонента, чтобы установить переменную для него.

Answer 1

В случае, если у кого-то есть подобная проблема, вот что я в итоге сделал:

Как указал Кевин Ван, вы не можете установить переменную в определении функционального компонента. Вместо этого я создал компонент класса с состоянием и установил элемент stati c.

import Select from '@material-ui/core/Select'
import MenuItem from '@material-ui/core/MenuItem';

class SelectComponent extends React.Component<SelectProps> {
    static Item = MenuItem

    render() {
        return (
            <Select>{ this.props.children }</Select>
        )
    }
}

export default SelectComponent

Я думаю, что это довольно забавно, что после столь полного использования хуков и функциональных компонентов без сохранения состояния я не считал этот компонент класса может быть решением больше.

Answer 2

Я получил этот испорченный код TS. Я не думаю, что это сработает, но просто чтобы дать вам идею, новый подход.

import Select from '@material-ui/core/Select'
import MenuItem from '@material-ui/core/MenuItem';

interface IMenuItem extends Select = {
   Item: MenuItem;
}

_Select<IMenuItem> = Select;

_Select.Item = MenuItem;

export default _Select