Нажмите Fn + Del на клавиатуре вместе. Объяснение: Потому что клавиша Delete на клавиатуре имеет функцию Insert. Поэтому нажатие Del вместе с клавишей Fn позволит включить режим вставки в вашем редакторе из режима Overwrite, как в вашем случае.
Хорошо - так что мне удалось заставить это работать. Текущее решение удовлетворяет двум основным требованиям для меня:
Выводит defaultProps
для дочернего компонента, который упаковывается, если они присутствуют, то есть компонент, сгенерированный оболочкой HoC, не нуждается в явно передать их.
Предоставить объединение свойств оболочек HoC и свойств нижестоящих компонентов, чтобы Intellisense отображал все доступные свойства для упакованного компонента.
В моем стремлении упростить то, что происходит на самом деле, типы, ожидаемые функцией withHoC
, жестко закодированы (в моем случае react-select
), поэтому оболочка withHoC
будет принимать только react-select
. ] Select
компонент для переноса. Все остальное, вероятно, приведет к ошибкам типа.
В этой ссылке описан некоторый код, который может автоматически выводить тип компонента, который должен быть упакован с помощью withHoC
, делая withHoC
многократно используемым с типами компонентов, отличными от react-select's
Select
,
// node dependencies used (because dependencies mutate so much this may not work in other versions):
// "react": "^16.8.2",
// "react-dom": "^16.8.2",
// "typescript": "^3.3.3",
// "react-select": "2.4.1",
// "@types/react": "^16.8.3",
// "@types/react-dom": "^16.8.2",
// "@types/react-select": "^2.0.13",
// Visual Studio 2017 TypeScript SDK build 3.3.3
import ReactDOM from "react-dom"; // (Optional - just for testing)
import React from "react";
import Select from "react-select";
// Properties shape for React Select (See react-select @type definitions)
import { Props } from "react-select/lib/Select";
// The properties we are want to add so that our resultant wrapped component contains all of its own properties plus the extra properties specified here
interface IHOCProps {
bar: string;
}
function withHoC(WrappedComponent: React.ComponentType<Props>) {
return class SomeHOC extends React.Component<IHOCProps & Props> {
// If 'bar' isn't specified, configure a default (this section is optional)
static defaultProps = {
bar: "default bar"
};
public render(): JSX.Element {
return <><div>{this.props.bar}</div><WrappedComponent {...this.props as any} /></>;
}
};
}
const WrappedSelect = withHoC(Select);
export { WrappedSelect, Select };
// Test it out (Optional). If using Visual Studio 2017 or some other IDE with intellisense,
// <WrappedSelect /> should show all the 'react-select' properties and the HoC property (bar).
// Additionally, all the defaultProps for 'react-select' are automatically inferred so no TypeScript errors about missing props when using <WrappedSelect />.
const TestMe = () =>
<>
<WrappedSelect bar="bumble monkey">
<WrappedSelect />
<Select />
</>;
// Append the result to an HTML document body element
ReactDOM.render(<TestMe />,document.getElementsByTagName("body")[0]);
В некоторой степени пиррова победа, поскольку она не может быть повторно использована разными типами, но она работает.
Один последний самородок; если вы используете Visual Studio 2017 и узел для TypeScript, убедитесь, что версия TypeScript SDK синхронизирована с пакетом узла npm, в противном случае среда IDE может сообщать об ошибках, которые не проявляются при компиляции командной строки (это не дало мне конца проблем красной сельди).
Microsoft опубликовала этот URL , который редко обновляется и, вероятно, устарел, но никто в корпорации не заметил.
Последний SDK всегда можно найти на GitHub здесь , который обычно всегда публикуется вместе с пакетами npm и nuget. [1 125]
Во-первых, убедитесь, что ваш компонент высшего порядка поставляет реквизит, который интересует ваш компонент. Возьмем, например, className
.
interface WithClassName {
className: string;
}
Наш withClassName
HOC примет компонент, готовый принять className
в качестве опоры, и вернет компонент, который больше не принимает className
.
export function withClassName<T extends React.ComponentType<Partial<WithClassName>>>(Component: T): React.FunctionComponent<Omit<React.ComponentProps<T>, keyof WithClassName>> {
return props => React.createElement(Component, { className: "foo", ...props });
}
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
Использование:
const NewSelect = withClassName(Select);