1

在我的 React 应用程序中，我正在尝试将 JS react-pose-@reach/router示例转换为 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<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; 初始姿势？：字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; innerR...' 不可分配给类型 'ComponentFactory>'。类型 'ComponentClass<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; 初始姿势？：字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; inner...' 不能分配给类型 'ComponentFactory>'。键入'组件类< { [键：字符串]：任何；孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; 初始姿势？：字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; inner...' 不提供签名匹配 '(poseConfig?: DomPopmotionConfig | DomPopmotionConfigFactory> | undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; inner...' 不提供签名匹配 '(poseConfig?: DomPopmotionConfig | DomPopmotionConfigFactory> | undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; inner...' 不提供签名匹配 '(poseConfig?: DomPopmotionConfig | DomPopmotionConfigFactory> | undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。| undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。| undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。

这让我很困惑，因为打字看起来是正确的。我不想在这里使用匿名签名并在打字时保持强势。

我该如何解决这个问题？

4

1 回答 1

0

问题是第一次渲染时location.key未定义。这可能就是您收到神秘错误消息的原因，它引用了未定义的内容。我用过location.pathname。它似乎没有任何问题。使用它会很棒location.key，但是在react-router-dom@5.0.1第一次渲染时它是未定义的。

于 2019-06-13T23:15:09.977 回答