Question

以下是表单组件

import React from 'react';
import { Elements } from '@helpers/ImportProxy';
import { mockApi } from '@constants/api';

type Props = {
  // formValues: any
};

type MapKindToComponentT = {
  [key: string]: React.SFC
}

/** @component */
export const Form: React.SFC<Props> = __props => {
  const renderQuestions = () =>
    mockApi.map(
      (question, index): React.ReactElement | undefined => {
        const mapKindToComponent: MapKindToComponentT = {
            radio:        Elements.RadioElement,
            text:         Elements.InputElement,
            email:        Elements.InputElement,
            url:          Elements.InputElement,
            checkbox:     Elements.CheckBoxElement,
            dropdown:     Elements.SelectElement,
            textarea:     Elements.TextareaElement,
        };
        if(mapKindToComponent[question.kind]) {
          const Element = mapKindToComponent[question.kind];
          return <Element key={index} question={question} />;
        }
      }
    );

  return (
    <form>
      {renderQuestions()}
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  );
};

export default Form;

mapKindToComponent的每个键的值是React功能组件。

以下是我因其当前定义的类型而收到的错误。与any配合正常。

类型错误：无法将类型'FunctionComponent'分配给类型 “ FunctionComponent <{}>”。属性“ propTypes”的类型为不相容。输入'WeakValidationMap |未定义”不能分配给类型“ WeakValidationMap <{}> |未定义”。类型“ WeakValidationMap”不可分配给类型“ WeakValidationMap <{}>”。类型“ {}”不可分配给类型“道具”。 TS2322

Answer 1

解决方案

明确指出MapKindToComponentT接受任何类型的功能组件。

type MapKindToComponentT = {
  [key: string]: React.SFC<any>
}

说明

在Props中定义的React.SFC的默认类型参数（描述@types/react的那个）是{}。

type SFC<P = {}> = FunctionComponent<P>;

如果组件希望使用更精确的类型作为其道具，例如{ foo: string }：

declare const SomeComponent: React.SFC<{ foo: string }>;

此类组件将无法分配给React.SFC。

const MyComponent: React.SFC = SomeComponent;      // ⛔️ Compile-time error
const MyComponent: React.SFC<any> = SomeComponent; // ✅ OK

如何为以字符串为键和React SFC为值的对象包装定义TypeScript类型？

1 个答案: