В моем приложении React я пытаюсь преобразовать образец JS _1 _-_ 2_ в TypeScript, но это не работает.
Вот соответствующие набивки в react-pose
:
import { ComponentType, HTMLProps } from 'react';
import { PoseElementProps } from './components/PoseElement/types';
import { DomPopmotionConfig } from 'popmotion-pose';
declare type DomPopmotionConfigFactory<T> = (props: PoseElementProps & T) => DomPopmotionConfig;
export declare type ComponentFactory<T> = (poseConfig?: DomPopmotionConfig | DomPopmotionConfigFactory<T>) => ComponentType<PoseElementProps & T>;
export declare type Posed = {
<T>(component: ComponentType<T>): ComponentFactory<T>;
[key: string]: ComponentFactory<HTMLProps<any>>;
};
declare const posed: Posed;
export default posed;
Пример JS выглядит так:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link, Location } from '@reach/router';
import posed, { PoseGroup } from 'react-pose';
import Home from './pages/home';
import About from './pages/about';
import './styles.css';
const RouteContainer = posed.div({
enter: { opacity: 1, delay: 300, beforeChildren: 300 },
exit: { opacity: 0 }
});
const PosedRouter = ({ children }) => (
<Location>
{({ location }) => (
<PoseGroup>
<RouteContainer key={location.key}>
<Router location={location}>{children}</Router>
</RouteContainer>
</PoseGroup>
)}
</Location>
);
const App = () => (
<div id="site-container">
<header>
<h1>Route transitions with Pose and Reach Router</h1>
</header>
<div id="content-container">
<ul id="site-nav">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
<PosedRouter>
<Home path="/" />
<About path="/about" />
</PosedRouter>
</div>
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));
Источник: https://popmotion.io/pose/examples/route-transitions-reach-router/
И я застрял здесь:
import * as React from 'react';
import { Router, Link, Location } from '@reach/router';
import { ComponentFactory } from 'react-pose/lib/posed';
import posed, { PoseGroup } from 'react-pose';
const RouteContainer: ComponentFactory<React.HTMLProps<any>> = posed.div({
enter: { opacity: 1, delay: 300, beforeChildren: 300 },
exit: { opacity: 0 }
});
const PosedRouter: Location = ({ children }: { children: React.ReactNode }) => (
<Location>
{({ location }) => (
<PoseGroup>
<RouteContainer key={location.key}>
<Router location={location}>{children}</Router>
</RouteContainer>
</PoseGroup>
)}
</Location>
);
На <RouteContainer key={location.key}>
написано:
Тип 'ComponentType ‹{[ключ: строка]: любой; дети ?: любые; поза ?: строка | строка [] | неопределенный; _pose ?: строка | строка [] | неопределенный; initialPose ?: строка | строка [] | неопределенный; withParent ?: логическое | неопределенный; onPoseComplete ?: ((поза: строка | строка []) => любая) | неопределенный; onValueChange ?: {...; } | неопределенный; innerR ... 'нельзя присвоить типу' ComponentFactory> '. Введите 'ComponentClass ‹{[ключ: строка]: любой; дети ?: любые; поза ?: строка | строка [] | неопределенный; _pose ?: строка | строка [] | неопределенный; initialPose ?: строка | строка [] | неопределенный; withParent ?: логическое | неопределенный; onPoseComplete ?: ((поза: строка | строка []) => любая) | неопределенный; onValueChange ?: {...; } | неопределенный; inner ... 'не может быть назначен типу' ComponentFactory> '. Введите 'ComponentClass ‹{[ключ: строка]: любой; дети ?: любые; поза ?: строка | строка [] | неопределенный; _pose ?: строка | строка [] | неопределенный; initialPose ?: строка | строка [] | неопределенный; withParent ?: логическое | неопределенный; onPoseComplete ?: ((поза: строка | строка []) => любая) | неопределенный; onValueChange ?: {...; } | неопределенный; внутренний ... 'не соответствует подписи' (PoseConfig ?: DomPopmotionConfig | DomPopmotionConfigFactory> | undefined): ComponentType ‹{[key: string]: any; дети ?: любые; поза ?: строка | строка [] | неопределенный; _pose ?: строка | строка [] | неопределенный; ... еще 4 ...; innerRef ?: {...; } | ... еще 1 ... | неопределенный; } & PoseContextProps & HTMLProps ‹... >> '.
Меня это сбивает с толку, потому что набор текста выглядит правильно. Я не хочу использовать анонимные подписи и стараться печатать здесь.
Как я могу решить проблему?