Reactjs TypeScript-我应该如何键入这些组件？

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

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

我将如何着手解决这个问题，或者更好地说，我将如何修改解决这个问题的方法

我在这里创建了一个示例应用程序：

错误类型“Options”不能分配给类型“OptionsA&OptionsB”。发生在此行中

<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 })}
      />
    </>
  );
};

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

---

将有趣的代码直接放入您的问题中。我们不应该链接到其他网站-这可能会腐烂-来获取有趣的信息。我已经用相关的代码更新了我的帖子。另外，你必须使用useReducer，因为，您有相关的状态项=>一个useState中的选定项和另一个useState中的相应选项这些更新不会在ItemCreator componentAdd console.logoptions中批量更新；在这两个表单文件的函数content=>中，当您切换所选项目时，您将在控制台中看到一个错误check this:P.s.这个解决方案仍然可以通过使用泛型来改进。但是，我尝试尽可能少地重构。但是，如果您继续这样做，请让我知道，如果您愿意，我将使用useReducer删除一个示例代码，因为这应该是处理此场景中状态的正确方法，而不会由于部分状态更新而导致错误

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) })
        }
      />
    </>
  );
};

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>
  );
};

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>
  );
};