Как указать тип (typeScript) для внедренных свойств через withRouter?
Я новичок в TypeScript и пытаюсь создать компонент, заключенный в HOC withRouter (через npm-пакет реакция-маршрутизатор-дом), чтобы получать реквизиты, такие как совпадение, история и местоположение. Как правильно это сделать? Могу ли я импортировать готовый интерфейс из @types/реакция-маршрутизатор-дом? Ниже моя первая попытка:
import classes from './SomeComponent.module.scss';
import { withRouter } from 'react-router-dom';
interface SomeComponentProps {}
interface WithRouter {
match: ObjectWithAnyKeys;
location: ObjectWithAnyKeys;
history: ObjectWithAnyKeys;
}
interface ObjectWithAnyKeys {
[s: string]: string;
}
export const SomeComponent: React.FunctionComponent<SomeComponentProps & WithRouter> = ({
match,
location,
history,
}) => {
return (
<div className = {classes.ReadActivityContainer}>
{'Some component that uses the router props match, location and history'}
</div>
);
};
export default withRouter(SomeComponent as any);
Ответы 1
просто импортируйте этот тип реквизита из lib
import { RouteComponentProps, withRouter } from 'react-router-dom';
чем вы должны сказать, что ваш компонент имеет эти реквизиты
type ownProps = {}
export const SomeComponent: React.FunctionComponent<ownProps & RouteComponentProps> = (props: ownProps & RouteComponentProps) => {
const history = props.history;
const match = props.match;
// ect... all in props
return (
<div>
some component that uses the router props match, location and history
</div>
);
};
export default withRouter(SomeComponent);
Ну, я почти уверен, что на этот вопрос уже где-то был дан ответ. Вы только что поискать больше. Стандартно, что HOC передает некоторые реквизиты вашему компоненту. проверьте определение «withRouter», вы увидите, какие существуют реквизиты. также вы можете видеть, что эти реквизиты являются интерфейсом, который экспортируется, поэтому вы можете его импортировать. и я не понимаю ваш вопрос о jsx
относительно JSX - скажем, у меня есть функция с оператором возврата: return (<div><SomeComponent /></div>) Какой тип возврата будет у этой функции?
проверьте машинопись. он говорит, что это JSX.Element. Интерфейс из реактивной библиотеки. JSX — это пространство имен, в котором много интерфейсов. если вы не знаете, какой тип следует использовать, вы всегда можете перейти к определению в машинописном тексте.
Шикарный ответ, спасибо за него. Но один вопрос, как это узнать? Я перерыл весь интернет и ничего не нашел, какие-нибудь советы о том, как решить эти проблемы в будущем? Кроме того, какой тип используется для JSX? Иногда у меня есть функции, которые возвращают JSX, чтобы иметь возможность обрабатывать сложное условное форматирование в функциональных компонентах, но я никогда не знаю, что использовать.