如何正确输入React动态组件

Question

错误： 类型 * 不可分配给类型“never”。交集 * 被减少为“从不”，因为属性 * 在某些成分中具有冲突的类型。

示例链接

type OneType = {
  title: string;
  component: 'One';
};
const One = ({ title }: OneType) => {
  return <div>{title}</div>;
};

type TwoType = {
  price: number;
  component: 'Two';
};
const Two = ({ price }: TwoType) => {
  return <div>{price}</div>;
};

type ThreeType = {
  name: string;
  component: 'Three';
};
const Three = ({ name }: ThreeType) => {
  return <div>{name}</div>;
};

const components = {
  One,
  Two,
  Three,
};

type EntityType = OneType | TwoType | ThreeType;

const entities: EntityType[] = [
  { title: 'some', component: 'One' },
  { price: 9999, component: 'Two' },
  { name: 'some', component: 'Three' },
];

function App() {
  return (
    <>
      {entities.map((entity) => {
        const Component = components[entity.component];
        return <Component {...entity} />;
      })}
    </>
  );
}

export default App;

具有共同类型的解决方案不合适，因为存在不同的实体 https://www.phind.com/search?cache=i2pgvyrsua0qs54n1zpspjib

Answer 1

当您拥有函数类型的联合时，这总是很棘手（这就是

Component

最终出现在当前代码中的情况）。我想我会以稍微不同的方式处理它：摆脱

components

映射对象并将其替换为包装器组件中的

switch

：

function Wrapper<T extends EntityType>(props: T) {
    switch (props.component) {
        case "One":
            return <One {...props} />;
        case "Two":
            return <Two {...props} />;
        case "Three":
            return <Three {...props} />;
    }
}

然后在

App

：

function App() {
    return (
        <>
            {entities.map((entity) => (
                <Wrapper {...entity} />
            ))}
        </>
    );
}

switch

让 TypeScript 知道正在使用

EntityType

联合体的哪个成员，因此它知道 props 对象适合该组件。

游乐场链接