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

Question

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

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

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

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

---

错误“类型 '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 })}
      />
    </>
  );
};

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

标签： reactjstypescriptforms

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