TypeScript - 我应该如何输入这些 React 组件？

Question

假设我有两个项目：A 和 B。这些项目有不同的选项。我想创建一个表单，允许我选择两个项目之一并设置该项目的选项。设置完选项后，我希望有一个处理程序来处理保存的选项。

我无法正确键入它，因为 A 和 B 的选项不相交，所以当我将选项传递到特定的项目表单组件时，它会给我一个 TypeScript 错误。

我将如何解决这个问题或更好的解决方法？

我在这里创建了一个示例应用程序：https://codesandbox.io/s/patient-bush-4emyo?file=/src/ItemCreator.tsx

---

错误“类型'选项'不可分配给类型'选项A和选项B'。”出现在这一行。

<Form options={options} setOptions={setOptions} />

这是主要的表单创建者：

import React, { useState, FC, useEffect } from "react";
import { OptionsAForm, OptionsA, defaultOptionsA } from "./OptionsAForm";
import { OptionsBForm, OptionsB, defaultOptionsB } from "./OptionsBForm";

type Options = OptionsA | OptionsB;

export const ItemCreator: FC = () => {
  const [item, setItem] = useState<string>("A");
  const [options, setOptions] = useState<Options>(defaultOptionsA);

  useEffect(() => {
    if (item === "A") {
      setOptions(defaultOptionsA);
    } else if (item === "B") {
      setOptions(defaultOptionsB);
    }
  }, [item]);

  let Form;
  if (item === "A") {
    Form = OptionsAForm;
  } else if (item === "B") {
    Form = OptionsBForm;
  }

  const handleSubmit = () => {
    // do stuff with Options here
    console.log(options);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <select value={item} onChange={(e) => setItem(e.target.value)}>
        <option value="" disabled>
          Select an item
        </option>
        <option value="A">A</option>
        <option value="B">B</option>
      </select>
      {Form && options != null && (
        <Form options={options} setOptions={setOptions} />
      )}
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

这些是选项的形式

import React, { FC } from "react";

export const defaultOptionsA: OptionsA = {
  name: "",
  color: ""
};

export interface OptionsA {
  name: string;
  color: string;
}

interface FormProps {
  setOptions: (options: OptionsA) => void;
  options: OptionsA;
}

export const OptionsAForm: FC<FormProps> = ({ options, setOptions }) => {
  return (
    <>
      <input
        placeholder="Name"
        value={options.name}
        onChange={(e) => setOptions({ ...options, name: e.target.value })}
      />
      <input
        placeholder="Color"
        value={options.color}
        onChange={(e) => setOptions({ ...options, color: e.target.value })}
      />
    </>
  );
};

import React, { FC } from "react";

export const defaultOptionsB: OptionsB = {
  name: "",
  weight: 0
};

export interface OptionsB {
  name: string;
  weight: number;
}

interface FormProps {
  setOptions: (options: OptionsB) => void;
  options: OptionsB;
}

export const OptionsBForm: FC<FormProps> = ({ options, setOptions }) => {
  return (
    <>
      <input
        placeholder="Name"
        value={options.name}
        onChange={(e) => setOptions({ ...options, name: e.target.value })}
      />
      <input
        type="number"
        placeholder="weight"
        value={options.weight}
        onChange={(e) =>
          setOptions({ ...options, weight: parseInt(e.target.value, 10) })
        }
      />
    </>
  );
};

Answer 1

更新了ItemCreator.tsx 文件，添加了泛型类型Option

import React, { useState, FC, useEffect } from "react";
import { OptionsAForm, OptionsA, defaultOptionsA } from "./OptionsAForm";
import { OptionsBForm, OptionsB, defaultOptionsB } from "./OptionsBForm";

type OptionTypes = "A" | "B";

interface OptionsMap {
  A: OptionsA;
  B: OptionsB;
}

type Options<T = OptionTypes> = T extends OptionTypes ? OptionsMap[T] : null;

const isObjectEmpty = (obj: Record<string, any>) =>
  Object.keys(obj).length === 0;

export const ItemCreator: FC = () => {
  const [item, setItem] = useState<OptionTypes | "">("");
  const [options, setOptions] = useState<Options | {}>({});

  useEffect(() => {
    if (item === "A") {
      setOptions(defaultOptionsA);
    } else if (item === "B") {
      setOptions(defaultOptionsB);
    }
  }, [item]);

  const handleSubmit = () => {
    // do stuff with Options here
    console.log(options);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <select
        value={item}
        onChange={(e) => setItem(e.target.value as OptionTypes)}
      >
        <option value="" disabled>
          Select an item
        </option>
        <option value="A">A</option>
        <option value="B">B</option>
      </select>
      {item === "A" && !isObjectEmpty(options) && (
        <OptionsAForm
          options={options as Options<"A">}
          setOptions={setOptions}
        />
      )}
      {item === "B" && !isObjectEmpty(options) && (
        <OptionsBForm
          options={options as Options<"B">}
          setOptions={setOptions}
        />
      )}
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

更新：使用useReducer，因为仍然有错误

import React, { FC } from "react";
import { OptionsAForm, OptionsA, defaultOptionsA } from "./OptionsAForm";
import { OptionsBForm, OptionsB, defaultOptionsB } from "./OptionsBForm";

type OptionTypes = "A" | "B";

interface OptionsMap {
  A: OptionsA;
  B: OptionsB;
}

type Options<T = OptionTypes> = T extends OptionTypes ? OptionsMap[T] : null;

const isObjectEmpty = (obj: Record<string, any>) =>
  Object.keys(obj).length === 0;

type Action =
  | {
      type: "SET_ITEM";
      item: OptionTypes;
    }
  | {
      type: "SET_OPTIONS";
      options: Options;
    };

interface IState {
  item: OptionTypes | "";
  options: Options | {};
}

const initialState: IState = {
  item: "",
  options: {}
};

function reducer(state: IState, action: Action): IState {
  switch (action.type) {
    case "SET_ITEM": {
      const { item } = action;
      return {
        ...state,
        item,
        options: item === "A" ? defaultOptionsA : defaultOptionsB
      };
    }
    case "SET_OPTIONS": {
      return {
        ...state,
        options: action.options
      };
    }
    default:
      return state;
  }
}

export const ItemCreator: FC = () => {
  const [state, dispatch] = React.useReducer(reducer, initialState);

  const { item, options } = state;

  const setItem = (selectedItem: OptionTypes) =>
    dispatch({ type: "SET_ITEM", item: selectedItem });

  const setOptions = (options: Options) =>
    dispatch({ type: "SET_OPTIONS", options });

  const handleSubmit = () => {
    // do stuff with Options here
    console.log(options);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <select
        value={item}
        onChange={(e) => setItem(e.target.value as OptionTypes)}
      >
        <option value="" disabled>
          Select an item
        </option>
        <option value="A">A</option>
        <option value="B">B</option>
      </select>
      {item === "A" && !isObjectEmpty(options) && (
        <OptionsAForm
          options={options as Options<"A">}
          setOptions={setOptions}
        />
      )}
      {item === "B" && !isObjectEmpty(options) && (
        <OptionsBForm
          options={options as Options<"B">}
          setOptions={setOptions}
        />
      )}
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};