如何用 TypeScript 接口替换 PropTypes

Question

我在我的 React 项目中使用了一个可重用的组件。该组件传递一些 props 供我们随意使用，并且是必需的。

我在一个 TypeScript 文件中，我正在尝试将以前的道具从 PropTypes 转换为 TS interface。

下面是组件以及解构后的 Props 和接口： 问题出在道具上：callback, actualValue, label。

interface RouteUserInfo {
  username: string;
  callBack: string;
  actualvalue: string;
  label: string;
}

export interface IState {
  isLoading: boolean;
  user: IUser | null;
  errorMessage: HttpResponseObj | null;
}

export class UserDetailsPage extends Component<RouteComponentProps<RouteUserInfo>, IState> {
  hasBeenMounted = false;

  state: IState = {
    errorMessage: null,
    isLoading: false,
    user: null
  };

render(): React.ReactNode {
    const { user, isLoading, errorMessage } = this.state;
    const { callBack, actualValue, label, match } = this.props;
    return (
      <div className="container-fluid lenses-container-fluid">
        {this.renderNoResourceComponent()}
        <div
          className="d-flex justify-content-between justify-content-center my-2"
          data-test="basic-render"
        >
          <div className="d-flex flex-row">
            <h2>{match.params.username}</h2>
            <span
              className="ml-3 my-2"
              onChange={callBack}
              value={actualValue}
              placeholder={label}
              data-tip
              data-event="mouseover"
              data-event-off="keydown mouseout"
              data-for="loggedIn"
            >
              {user.isActive ? <ActivityBadge isActive /> : <ActivityBadge />}
            </span>
          </div>
          {user && this.renderHeaderDropdown()}
        </div>
      </div>
    );
  }

但是当我尝试在<span /> 上这样使用它们时出现以下错误：

Type '{ children: Element; className: string; onChange: any; value: any; placeholder: any; data-tip: true; data-event: string; data-event-off: string; data-for: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.
  Property 'value' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.ts(2322)

在实际的道具上我得到了这个：

对于回调

Property 'callBack' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<RouteComponentProps<RouteUserInfo, StaticContext, any>>'.ts(2339)
const callBack: any

对于实际值：

Property 'actualValue' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<RouteComponentProps<RouteUserInfo, StaticContext, any>>'.ts(2339)
const actualValue: any

对于标签：

Property 'label' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<RouteComponentProps<RouteUserInfo, StaticContext, any>>'.ts(2339)
const label: any

我显然可以对所有这些属性使用:any，但我想知道它们的具体类型，以及如何找到它们的方法。

我还提供了可重用组件本身：

import React from 'react';
import ReactTooltip, { Place } from 'react-tooltip';

import './styles.scss';

export interface Props {
  id: string;
  place?: Place;
  children?: React.ReactNode;
}
function Tooltip(props: Props): JSX.Element {
  const { children, id, place, ...rest } = props;
  return (
    <ReactTooltip id={id} place={place} {...rest} className="tooltip">
      {children}
    </ReactTooltip>
  );
}
export default Tooltip;

Answer 1

您为什么要向span 提供value、onChange 和placeholder？如果您的跨度是某种受控输入，那么您可能应该考虑将其切换为实际的<input /> 元素，这不会抱怨这些道具:)